2015-07-23 4 views
2

У меня есть небольшой список и вы хотите выполнить функцию для каждого элемента списка. Но эта функция выполняется несколько раз, и я не знаю, почему.Функция в ng-src выполняется несколько раз

HTML:

<body ng-controller="ListCtrl"> 
    <div> 
     <ul ng-repeat="item in items"> 
      <li>{{item.name}}<img ng-src="{{test()}}"></li> 
     </ul> 
     {{counter}} 
    </div> 
    </body> 

Угловой:

$scope.items = [ 
{name: 'foo', }, 
{name: 'bar', }, 
{name: 'baz', } 
]; 
var counter= 0; 
$scope.test= function(){ 
$scope.counter=counter++; 
console.log("Executed"); 
} 

Почему функция текста выполняется несколько раз? Также см. Этот пример: http://plnkr.co/edit/kxJZHCmFs4POd3SVtGZ8

ответ

3

Это ожидаемое поведение. Всякий раз, когда выражение интерполяции {{}} встречается в html-шаблоне, есть часы, созданные для отслеживания изменений в этом выражении. Во время цикла $digest выражение может быть оценено десятки раз.
Никогда не используйте вызовы функций в выражениях интерполяции. Только ссылочные свойства, определенные в $scope. В вашем случае это должно быть что-то вроде

$scope.testValue = $scope.test(); 

{{testValue}} 
+0

Это решение работает отлично. Но что, если нам нужно передать параметры? – ChandrasekarG

+0

@ChandrasekarG передать их в код контроллера, '$ scope.test (params);' –

+0

Что делать, если мы используем его в нескольких местах в HTML с разными параметрами. Передача параметров вышеописанным образом будет работать только в том случае, если значение параметра равно. – ChandrasekarG

Смежные вопросы