将href返回ng-href的方法被连续调用

Question

我有一个菜单小部件，其中每个菜单项都可以扩展到另一个子菜单。类似于以下内容：http://plnkr.co/MGqCkAFUexSzSfcwthu5?p=preview

链接标记为：

<a class="link-class"
    ng-href={{ getLink(item) }}
    ng-style="setTextAlignment(level)">
    {{ item.name }}
 </a>

使用控制器中定义的以下方法：

 /**
 * @param {!angular.Scope} scope The scope of the directive.
 * @param {!Object} item The menuitem.
 * @return {string} Whether current user can access item.
 * @private
 */
 CollapsibleSubMenu.getLink_ = function(scope, item) {
   console.log('link called');
   return item['subMenu'] ? '' : item['link'];
 };

因此，基本上，如果项目具有子菜单（submenu === true），则不应具有href（但是来自后端的项目数据具有带有submenu的项目：true和有效链接。对于旧的实现，这是可以的菜单。）

现在的问题是，菜单项一出现在屏幕上，我就可以看到console.log每隔一秒钟左右打印一次消息“称为链接”。检索到的项目对象不会更改。那么，为什么这么频繁地调用此getLink方法呢？

Answer 1

[Angular使用脏检查而不是使用可观察的东西，这意味着每次执行$digest循环时，您的函数也会执行，因为它不知道值是否已更改。

如果您想实际使用此功能，只需开始在代码段的框中键入内容，然后单击按钮以查看您的函数实际被调用了多少次。

angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope){
  var numCalls = 0;
  
  $scope.getConstantValue = function(){
    numCalls += 1;
        
    return "Never gonna change";
  };
  
  $scope.getNumberOfCalls = function(){
    $scope.numCalls = numCalls;
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="myInput" />
  <p>Number of calls: {{numCalls}}</p>
  <p>{{getConstantValue()}}</p>
  <button type="button" ng-click="getNumberOfCalls()">Update Call Count</button>
</div>