[英]angularjs ngRepeat directive to not trigger digest for other items in the list
似乎ngRepeat在更改其中一个列表项之后触发了任何列表项上的手表。 我已经在使用track by,所以似乎无济于事。
这是我的模板:
div(ng-repeat="poll in polls track by poll._id")
poll(poll="poll")
.poll
.title(ng-if="!poll.closed") {{poll.title}}
.btn(ng-click="poll.closed = true") Change poll
{{someExpensiveComputation(poll._id)}}
JavaScript的:
.directive('poll', function($rootScope, $modal) {
return {
replace: false,
restrict: 'E',
scope: {
poll: '='
},
templateUrl: '/tmpl/poll',
link: function($scope, elem, attrs) {
$scope.someExpensiveComputation = function (id) { ... }
}
}
});
似乎只要更改轮询项目,someExpensiveComputation函数就会为所有轮询运行,并且每次运行3倍。 我如何才能不这样做呢? 它只应触发该指令的观察者。 我认为那应该是可能的。
谢谢。
在每个$ digest循环中,所有watch- expressions都会被处理(评估)多次。
因此,优良作法是使watch- expression尽可能简单(就计算复杂度而言)。
(顺便说一句,在视图中使用{{...}}
会创建手表 。)
如果someExpensiveComputation()
在计算上很昂贵,则您不想每次都对其求值,而仅在可能产生不同结果时才求值。 它取决于函数的实现,但是假设其结果仅取决于每个轮询的属性,那么您可以观看该轮询并在更改它时调用昂贵的函数:
.poll
...
{{expensivelyComputedValue}}
.directive('poll', function($rootScope, $modal) {
return {
...
link: function(scope, elem, attrs) {
function someExpensiveComputation(id) { ... }
scope.expensivelyComputedValue = someExpensiveComputation(scope.poll.id);
scope.$watch('poll', function (newValue, oldValue) {
if (newValue === oldValue) { return; }
scope.expensivelyComputedValue = someExpensiveComputation(scope.poll.id);
}, true);
}
}
});
当然,如果昂贵的计算结果仅取决于poll的特定属性(而不是整个对象),则仅监视此属性就足够了,从而使watch- expression更加“轻巧”。 例如:
scope.$watch('poll.closed', function (...) {...});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.