angularjs – 将href返回到ng-href的方法是连续调用的

2019年8月4日 170次阅读

我有一个菜单小部件,其中每个菜单项可以扩展到另一个子菜单.类似的东西：
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'];
 };

所以基本上如果项目有一个子菜单(子菜单=== true),它不应该有一个href(但是来自后端的项目数据包含子菜单的项目：true和一个有效的链接.这对于菜单的旧实现是可以的.)

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

最佳答案 Angular使用脏检查而不是使用observable,这意味着每次执行$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>
点赞