Question

我遇到了Angular的消化周期疯狂的问题：

angular.js:12330 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

我有这个自定义指令：

<b-bar-chart b-data="getData(question)"></b-bar-chart>

其中，getData函数调用控制器中的函数（NOT IN THE DIRECTIVE，因此在指令中使用＆amp;而不是=单向绑定不起作用）。控制器功能：

$scope.getData = function (question) {
    return [
      {
        'name': 'Strongly Agree',
        'value': question.stats.responsePercentages.stronglyagree
      },
      {
        'name': 'Agree',
        'value': question.stats.responsePercentages.agree
      }
    ]
  }

在指令中我有这个：

scope: {
    // I think this should this be = and not &, because the function is in the controller and not in the directive
    data: '=bData'
},

在指令模板中我有这个：

<li ng-repeat="d in data">
    <div class="percent">{{d.value|number:0}}<span>%</span></div>
    <div class="fm-bar-text">{{d.name}}</div>
</li>

看起来它继续调用控制器中的代码，导致不必要的循环。有没有办法确保只调用一次getData函数，还是有不同的解决方案？感谢

Answer 1

getData不应该返回一个新数组，否则Angular会假设数据是新的。您应该将结果分配给$scope并以这种方式绑定它。通常最好在绑定时避免函数调用。

Answer 2

不是在每个摘要周期计算getData(question)，而是仅在question更改时重构计算：

家长控制器：

 $scope.$watch("question", function(newValue) {
     $scope.bData = $scope.getData(newValue);
 });

HTML：

 <!-- Re-factor this -->
 <b-bar-chart b-data="getData(question)"></b-bar-chart>

 <!-- TO this -->
 <b-bar-chart b-data="bData"></b-bar-chart>

因此，不是在每个摘要周期计算数组，而是仅在question更改时才创建新数组。

Answer 3

指令=用于范围变量之间的双向绑定。在您的指令中，您将其绑定到函数返回值，每次都会将其视为新值，并且摘要过程将持续进行。

我建议调用函数inside指令并将其分配给范围变量。

查看 Working Fiddle 。

<强>指令：

MyApp.directive("bBarChart", function($compile){
    return {
      restrict: "E",
    scope: {
      data: '&bData'
    },
    template: '<li ng-repeat="d in data_values">' +
      '<div class="percent">{{d.value|number:0}}<span>%</span></div>' +
      '<div class="fm-bar-text">{{d.name}}</div>' +
        '</li>',
    link: function(s, e, a){
        s.data_values = s.data();
    }
  }
});

在控制器中调用Angular函数并将结果传递给指令

3 个答案: