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

控制器：

$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

Answer 2

我同意Ilan的問題描述和解決方案-它可以在objects數組不改變的情況下起作用，否則寬度將被錯誤地計算。 如果可以在運行時添加/刪除新對象，則最好在更改集合時（參見作用域的$watchCollection方法）或在每個摘要周期（對於元素的簡短列表，應足夠快）重新計算寬度。像那樣：

  var widths = [];
  $scope.$watch(function calculateWidths() {
    var tempWidth = 0;
    widths = [];
    angular.forEach($scope.objects, function(obj) {
      tempWidth += obj.value;
      widths.push(tempWidth);
    });
  });

  $scope.getStyle = function(idx){
    return {width: widths[idx] + 'px'}
  }

這是the子