Вызов Угловая функция в контроллере и передать результат в директиве

Question

У меня возникли проблемы с Угловое Дайджест цикла сходит с ума:

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

У меня есть этот обычай директиву:

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

в которых, GetData функция вызывает функцию в контроллере (НЕ В ДИРЕКТИВЕ, поэтому использование & вместо = в директиве для односторонней привязки не работает). Функция управления:

$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 не должен возвращать новый массив, в противном случае Угловой предполагает, что данные являются новыми. Вы должны назначить результат $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

В директиве = используется для двусторонней привязки между переменными сферы. В вашей директиве вы привязываете его к функции возвращаемое значение, которое будет считаться новым значением каждый раз, и процесс дайджест будет проходить непрерывно.

Я бы предложил вызвать функцию внутри директивы и присвоить ее переменной области.

Отъезд 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(); 
    } 
    } 
});