angularjs ng Repeat指令不触发列表中其他项的摘要

时间:2014-05-09 12:54:08

标签: javascript angularjs angularjs-directive

似乎ngRepeat在更改其中一个后触发任何列表项上的监视。我已经在使用track了,所以似乎没什么帮助。

这是我的模板:

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次。我怎么能不这样做呢?它应该只触发该指令的观察者。我认为这应该是可能的。

感谢。

1 个答案:

答案 0 :(得分:1)

在每个$ digest循环中多次处理(评估)所有 watch - 表达。
因此,保持 watch - 表达尽可能简单(就计算复杂性而言)是一种很好的做法。

(顺便说一句,在视图中使用{{...}}会创建 watch 。)

如果someExpensiveComputation()计算成本昂贵,那么您不希望每次都对其进行评估,但只有当它可能会产生不同的结果时。它取决于函数的实现,但假设其结果仅依赖于每个轮询的属性,那么您可以 watch 轮询并在更改时调用昂贵的函数:< / p>

.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);
        }
    }
});

当然,如果昂贵计算的结果仅取决于民意调查的特定属性(而不是整个对象),那么只需 watch 这个属性就足够了您的 watch - 表达更加轻松&#34;轻量级&#34;。 E.g:

scope.$watch('poll.closed', function (...) {...});