ng-repeat 中的自定义指令在使用 $index 跟踪时无法正确更新绑定值答案

【问题标题】：custom directive inside ng-repeat doesn't update bound values correctly when using track by $indexng-repeat 中的自定义指令在使用 $index 跟踪时无法正确更新绑定值
【发布时间】：2014-07-02 18:40:56
【问题描述】：

我正在实现一个为某些列应用格式的自定义网格。当您单击“切换排序”链接时，第二列不会与第一列并排。但是，删除“track by $index”可以修复它。起初我明白绑定原始数据是问题所在，但事实并非如此。

<div ng-app="testApp">
    <div ng-controller="MyCtrl">
        <h3>With Track By</h3>
        <div ng-repeat="row in (filteredRows=(rows | orderBy:sort.column:sort.descending)) track by $index">
            <span>{{ filteredRows[$index].s }}</span><fmt data-model="filteredRows[$index]"></fmt>
        </div>
        <br/>
        <a href="#" ng-click="sort.descending = !sort.descending">Toggle Sort</a>
    </div>
</div>

angular.module('testApp', [])
.controller('MyCtrl', function($scope) {
    $scope.rows = [ 
        { v: 1.2345, s: 'foo' },
        { v: 0.1, s: 'bar' }, 
        { v: -3.33333, s: 'baz' }, 
        { v: 10, s: 'rar' } 
    ];
    $scope.sort = { column: 'v', descending: false };
})
.directive('fmt', function() {
    return {
        restrict: 'AE',
        scope: {
            model: '='
        },
        template: '<span style="display:inline-block;width:100px;text-align:right;">{{ model.v }}</span>' +
            '<span style="display:inline-block;width:100px;text-align:right;">{{ fmtModel }}</span>',
        controller: function($scope) {
            $scope.fmtModel = $scope.model.v.toFixed(2);
        }
    };
})

这个小提琴演示的问题：http://jsfiddle.net/4Hs36/5/

这是一个似乎有效的解决方法：http://jsfiddle.net/4Hs36/6/。在这里，我将格式化的值直接附加到模型中，但我不确定这是否是个好主意。

希望有人能更清楚地了解“track by $index”是怎么回事？

【问题讨论】：

我认为这是按索引跟踪的错误，您有没有向他们提出问题？我还有另一个解决方法：jsfiddle.net/ramseyfeng/a1jse1Lh
我已经为此创建了一个问题，如果是错误，希望有人可以帮助回答。 github.com/angular/angular.js/issues/15363

标签： javascript angularjs angularjs-directive angularjs-ng-repeat angularjs-filter

【解决方案1】：

关于范围，我不太了解。我的印象是你可以将一个属性附加到 $scope 并且当绑定值发生变化时它会自动更新。

我用这个http://jsfiddle.net/4Hs36/7/更新了原帖中的小提琴

controller: function($scope) {
  $scope.fmtModel = function() { 
    return $scope.model.v.toFixed(2);
  }
}

我想我可以添加一个 $watch 并以这种方式修复它：http://jsfiddle.net/4Hs36/8/

controller: function($scope) {
  $scope.$watch('model.v', function() {
    $scope.fmtModel = $scope.model.v.toFixed(2);
  });
}

【讨论】：

【解决方案2】：

我遇到了和你一样的问题。我在 Github 上提出了一个问题，他们回答这是出于性能考虑的预期行为。您可以查看详细信息：

https://github.com/angular/angular.js/issues/15363#issuecomment-258401432

【讨论】：