数组有

Question

我使用angular来构建一个表单，其中insert和modify在同一页面上。 在我做插入时，表单工作正常但是当用户输入modify时，模板没有绑定回来。

我的HTML： -

<table>
    <tbody>
        <tr ng-repeat="DescEN in tempDescENList" ng-include="getTemplate(DescEN,'EN')">
        </tr>
    </tbody>
</table>
<script type="text/ng-template" id="ENdisplay">
    <td>{{DescEN.Sequence}}</td>
    <td>{{DescEN.Type}}</td>
    <td>{{DescEN.Detail}}</td>
    <td>
        <button class="btn btn-warning btn-xs" ng-click="editDesc(DescEN,'EN')">Modify</button>
        <button class="btn btn-danger btn-xs" ng-click="deleteDesc(DescEN,'EN')" ng-click="">Delete</button>
    </td>
</script>
<script type="text/ng-template" id="ENedit">
    <td>{{DescEN.Sequence}}</td>
    <td>{{DescEN.Type}}</td>
    <td><input type="text" ng-model="DescEN.Detail" /></td>
    <td>
        <button class="btn btn-info btn-xs" ng-click="saveEditDesc(DescEN,'EN')">Save</button>
        <button class="btn btn-primary btn-xs" ng-click="reset(DescEN,'EN')">Cancel</button>
    </td>
</script>

我的脚本后面加载了对象，我用控制台检查它就在那里。 然而，它没有绑定到我的ng-repeat。奇怪的是，在我手动点击后在UI上添加一个新行，然后先前的数据已加载。 例如，从.js文件中我将3个对象加载到转发器中。 默认情况下，ng-template没有显示3个对象， 然而，在我使用界面添加一个对象之后，它在我的ng-repeat中显示了4个记录。

问题： - 如何使我的ng-template在从js绑定后显示ENdisplay

Answer 1

我有一个类似的问题，问题是竞争条件。模板首先从$templateCache通过ng-include加载，还是首先加载数据...这是您可能遇到的问题。

我用指令解决了这个问题：

指令

.directive 'taskForm', [
    '$parse'
    '$http'
    '$compile'
    '$templateCache'
    ($parse, $http, $compile, $templateCache)->

        dir =
            restrict: 'A'
            require: 'ngModel'
            link: ($scope, elem, attrs, ngModel)->

                $scope.task = $parse(attrs.ngModel) $scope
                type = $scope.task.task_type
                types = [
                    'type_a'
                    'type_b'
                    'type_c'
                ]

                if _.indexOf(types, type) > -1
                    url = "./views/task.#{type}.html"

                    $http.get url, {cache: $templateCache}
                    .then (rsp)->
                        tmpl = rsp.data

                        elem.html tmpl
                        $compile(elem.contents()) $scope
]

然后你可以像这样使用它：

实施

<tr ng-repeat="DescEN in tempDescENList">
   <td>
       <div ng-model="DescEN" task-form></div>
   </td>
</tr>