数组中有数据后，角度ng-template没有更新

Question

I using angular to build a form where insert and modify is on same page. While I doing insert the form work well however when user enter modify then template did not bind back.

My 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>

My script behind did load the object and i check with console and it's there. However it did not bind to my ng-repeat. The weird thing is that after I manual click on add a new line on UI then the the previous data had load. For example from .js file i load 3 object into repeater. By default the ng-template did not show the 3 object, However after i add one more object by using interface then it show 4 records in my ng-repeat.

Question:- How do I make my ng-template to show ENdisplay after binding from js

Answer 1

I had a similar issue, the issue being a race condition. Does the template load first from the $templateCache via ng-include or does the data load first... that's the issue you're likely having.

I solved this with a directive:

directive

.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
]

Then you can use it like so:

implementation

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