方法返回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']; 
}; 

所以基本上，如果項具有子菜單（子菜單== = true），它不應該有一個href（但是來自後端的項目數據具有子菜單項：true和一個有效的鏈接，這對於舊的菜單實現是可以的。）

現在的問題是，儘快菜單項出現在屏幕上，我可以看到console.log打印消息的鏈接每秒鐘左右調用。一旦檢索到的項目對象不會改變。那麼爲什麼這個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>