javascript - Angular 1 将数据绑定(bind)到脚本模板

Question

我仍然是一名即将到来的开发人员，但我在这里遇到了问题。我想将主模板中的一个项目绑定(bind)到脚本模板，该脚本模板是通过 md-dialog 激活的表单。如何将外部模板中的数据绑定(bind)到脚本模板？我想绑定(bind)主模板中的数据作为表单的占位符。

这是我的代码片段。

ol(style="font-size: 14px; width: 100%; overflow-y: auto;")
            li(ng-repeat="action in rating.actions" style="margin-bottom: 1em;")
              div.action-items
                div <b>Task:</b> {{ action.task }}
                div <b>Owned by:</b> {{ action.owner }}
                div <b>Due date:</b> {{ action.due_date | date:'medium' }}
                div(ng-switch="action.status") <b>Status:</b> &nbsp;
                  span(ng-switch-when="unresolved" style="color:red;") {{ action.status }}
                     md-button.md-raised(ng-click="showConfirm($event, rating, action.id)" style="margin-left:7px; background-color:green; color:white; min-height: 23px !important; min-width: 46px !important; font-size: 10px !important; line-height: 0px;") Resolve Now
                  span(ng-switch-when="resolved" style="color:green;") {{ action.status }}&nbsp;
                    span(style="color: #757679") by {{ action.resolved_by }}
                a(href="" ng-click="showDelete($event, rating, action.id)")
                  i.fa.fa-trash-o(style="color:red; margin-right: 7px; font-size: 18px")
                a(href="" ng-click="showEdit($event, rating, action.id)")
                  i.fa.fa-pencil-square-o(style="color:black; margin-left: 7px; font-size: 18px")

        script(type="text/ng-template" id="dialogContent.tmpl.html")
          md-dialog(ng-cloak)
              md-dialog-content
                  form(name="editItem")
                  div(layout layout-sm="column")
                  md-input-container(flex)
                      label Task
                      input(ng-model="task" placeholder="{{action.task}}")
                  md-input-container(flex)
                      label Owned By
                      input(ng-model="owner")
                  md-datepicker(flex ng-model="date" md-placeholder="Due date")
                  div(style="margin: 0 auto; display: block; margin-bottom: 3px;")
                  md-button.md-raised.md-primary(ng-click="hide()" ng-controller="DashboardCtrl" type="submit" id="submit" style="margin: 0 auto; display: inline-block;") Confirm Edit
                  md-button.md-raised.md-primary(ng-click="closeDialog()" style="margin: 0 auto; display: inline-block;") Cancel

Answer 1

我不熟悉您使用的语言风格，但是，您需要使用您为脚本模板提供的 ID。所以你有:

script(type="text/ng-template" id="dialogContent.tmpl.html")

因此，要将其与 ng-repeat 一起使用，您需要将行更改为:

li(ng-repeat="action in rating.actions" style="margin-bottom: 1em;"
  ng-include="dialogContent.tmpl.html")

然后每次重复都会使用您的脚本模板。