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'];
 };

所以基本上如果项目有一个子菜单（子菜单=== true），它不应该有一个href（但是来自后端的项目数据包含子菜单的项目：true和一个有效的链接。这对旧的实现来说没问题菜单。）

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

Answer 1

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>

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

1 个答案: