ng-src中的函数执行多次

function in ng-src executed multiple times

本文关键字：执行 函数 ng-src      更新时间：2023-09-26

我有一个小列表，并希望对每个列表项执行一个函数。但是这个函数被执行了很多次，我不知道为什么。

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");
}

为什么函数text要执行多次?还可以查看这个示例:http://plnkr.co/edit/kxJZHCmFs4POd3SVtGZ8

这是预期的行为。每当在html模板中满足插值表达式{{}}时，就会创建一个监视来跟踪该表达式的变化。在一个$digest循环中，表达式可以被求值几十次。
永远不要在插值表达式中使用函数调用。仅引用$scope中定义的属性。在你的例子中应该是像

这样的东西
$scope.testValue = $scope.test();
{{testValue}}
相关文章：