javascript - angularjs - 动态函数返回

Question

index.html

<div ng-repeat="object in objects" ng-style="getStyle(object.id)"></div>

Controller .js

[...]

$scope.startWidth = 100;

$scope.getObject = [...]

$scope.getStyle = function(id) {
   var widthVal = $scope.startWidth;
   $scope.StartWidth += $scope.getObject(id).value;
   return { width : widthVal }
}

[...]

此代码运行到无限 $digest 循环。我想我知道为什么。返回值不应该是动态的。但如果没有循环我怎样才能实现这一点呢？我想显示不同宽度的对象。对象的宽度取决于前一个对象的值。

Answer 1

问题在于 ng-style 在每个子作用域上放置一个 $watchExpression。

$watchExpression 必须幂等，这意味着它必须通过多次检查返回相同的结果。
如果$watchExpression仍然脏，另一个$digest将会被触发。

更新

在看到GRaAL不错的答案后，我想出了更好的解决方案:

这是一个演示插件:http://plnkr.co/edit/oPrTiwTOyCR3khs2iVga?p=preview

Controller :

$scope.$watchCollection('objects', function calculateWidths() {
  var tempWidth = 0;
  for( var i = 0; i < $scope.objects.length; i++) {
    tempWidth += $scope.objects[i].value;
    $scope.objects[i].width = tempWidth + 'px';
  }
});

标记:

<div ng-repeat="object in objects" ng-style="{width: object.width}">

旧解决方案

这是一个骗子:http://plnkr.co/edit/CqxOmV5lpZSLKxqT4yqo?p=preview