コール角度機能と

Question

をディレクティブに結果を渡す私は角のダイジェストサイクルが狂っに問題が生じています：

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

私はこのカスタム指令持っている：どの、のgetDataで

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

を関数はコントローラ内の関数を呼び出します（一方向バインディングのディレクティブでは=の代わりに&を使用しても動作しません）。コントローラ機能：私はこれを持っているディレクティブで

$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に割り当て、そのようにバインドする必要があります。一般的に、バインド時には関数呼び出しを避けるのが最善です。代わりに、コンピューティングgetData(question)の

Answer 2

は、リファクタリング、それを計算するために、サイクルを消化するすべての場合にのみ、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

指示文=は、スコープ変数間の双方向バインディングに使用されます。あなたのディレクティブでは、関数戻り値にバインドしています。この値は毎回新しい値とみなされ、ダイジェスト処理が継続して行われます。

私は関数の中で関数を呼び出して、スコープ変数に割り当てることをお勧めします。

チェックアウト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(); 
    } 
    } 
});