Angular 1将数据绑定到脚本模板

时间:2017-03-10 11:40:48

标签: javascript angularjs templates

我仍然是即将开发的开发者,我在这里遇到了问题。 我想将主模板中的项目绑定到脚本模板,该模板是通过md-dialog激活的表单。如何将外部模板中的数据绑定到脚本模板? 我想绑定主模板中的数据以充当表单的占位符。

这是我的代码段。

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

1 个答案:

答案 0 :(得分:0)

我不熟悉您正在使用的语言风格,但是,您需要使用您为脚本模板提供的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")

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