表達評價2倍

的test.html

<!DOCTYPE html> 
<html ng-app ng-controller="AppController"> 
    <head> 
     <script type="text/javascript" src="angular.js"></script> 
     <script type="text/javascript" src="script1.js"></script> 
    </head> 
    <body> 
     <div ng-include="'test1.html'"></div> 
     {{testFn()}} 
    </body> 
</html>

test1.html

<div>{{testFn()}}</div>

script1.js

function AppController($scope) { 
    $scope.testFn = function() { 
     console.log("TestFn"); 
     return "test"; 
    } 
}

發生FN testFn執行4次。我期望在控制檯中看到只有2個日誌。即使如果我刪除

<div ng-include="'test1.html'"></div>

有2個日誌，不只是一個。我錯了什麼？

更新：

angular.js

// added console.log to original code 
var ngBindDirective = ngDirective(function(scope, element, attr) { 
    console.log("ngDirective", attr.ngBind); 
    element.addClass('ng-binding').data('$binding', attr.ngBind); 
    scope.$watch(attr.ngBind, function ngBindWatchAction(value) { 
    console.log("ngDirective - scope.$watch", value); 
    element.text(value == undefined ? '' : value); 
    }); 
});

的test.html

<!DOCTYPE html> 
<html ng-app ng-controller="AppController"> 
    <head> 
     <script type="text/javascript" src="angular.js"></script> 
     <script type="text/javascript" src="script1.js"></script> 
    </head> 
    <body> 
     <div ng-bind="testFn()"></span> 

    </body> 
</html>

控制檯

createInjector - modulesToLoad undefined angular.js:2666 
loadModules undefined angular.js:2756 
createInjector - modulesToLoad 
["ng", Array[2]] 
angular.js:2666 
loadModules 
["ng", Array[2]] 
angular.js:2756 
loadModules ["ngLocale"] angular.js:2756 
loadModules [] angular.js:2756 
supportObject - key $locale angular.js:2702 
provider - name $locale angular.js:2712 
supportObject - key $compile angular.js:2702 
provider - name $compile angular.js:2712 
supportObject - key aDirective angular.js:2702 
factory - name aDirective angular.js:2723 
provider - name aDirective angular.js:2712 
supportObject - key inputDirective angular.js:2702 
factory - name inputDirective angular.js:2723 
provider - name inputDirective angular.js:2712 
supportObject - key textareaDirective angular.js:2702 
factory - name textareaDirective angular.js:2723 
provider - name textareaDirective angular.js:2712 
supportObject - key formDirective angular.js:2702 
factory - name formDirective angular.js:2723 
provider - name formDirective angular.js:2712 
supportObject - key scriptDirective angular.js:2702 
factory - name scriptDirective angular.js:2723 
provider - name scriptDirective angular.js:2712 
supportObject - key selectDirective angular.js:2702 
factory - name selectDirective angular.js:2723 
provider - name selectDirective angular.js:2712 
supportObject - key styleDirective angular.js:2702 
factory - name styleDirective angular.js:2723 
provider - name styleDirective angular.js:2712 
supportObject - key optionDirective angular.js:2702 
factory - name optionDirective angular.js:2723 
provider - name optionDirective angular.js:2712 
supportObject - key ngBindDirective angular.js:2702 
factory - name ngBindDirective angular.js:2723 
provider - name ngBindDirective angular.js:2712 
supportObject - key ngBindHtmlUnsafeDirective angular.js:2702 
factory - name ngBindHtmlUnsafeDirective angular.js:2723 
provider - name ngBindHtmlUnsafeDirective angular.js:2712 
supportObject - key ngBindTemplateDirective angular.js:2702 
factory - name ngBindTemplateDirective angular.js:2723 
provider - name ngBindTemplateDirective angular.js:2712 
supportObject - key ngClassDirective angular.js:2702 
factory - name ngClassDirective angular.js:2723 
provider - name ngClassDirective angular.js:2712 
supportObject - key ngClassEvenDirective angular.js:2702 
factory - name ngClassEvenDirective angular.js:2723 
provider - name ngClassEvenDirective angular.js:2712 
supportObject - key ngClassOddDirective angular.js:2702 
factory - name ngClassOddDirective angular.js:2723 
provider - name ngClassOddDirective angular.js:2712 
supportObject - key ngCspDirective angular.js:2702 
factory - name ngCspDirective angular.js:2723 
provider - name ngCspDirective angular.js:2712 
supportObject - key ngCloakDirective angular.js:2702 
factory - name ngCloakDirective angular.js:2723 
provider - name ngCloakDirective angular.js:2712 
supportObject - key ngControllerDirective angular.js:2702 
factory - name ngControllerDirective angular.js:2723 
provider - name ngControllerDirective angular.js:2712 
supportObject - key ngFormDirective angular.js:2702 
factory - name ngFormDirective angular.js:2723 
provider - name ngFormDirective angular.js:2712 
supportObject - key ngHideDirective angular.js:2702 
factory - name ngHideDirective angular.js:2723 
provider - name ngHideDirective angular.js:2712 
supportObject - key ngIncludeDirective angular.js:2702 
factory - name ngIncludeDirective angular.js:2723 
provider - name ngIncludeDirective angular.js:2712 
supportObject - key ngInitDirective angular.js:2702 
factory - name ngInitDirective angular.js:2723 
provider - name ngInitDirective angular.js:2712 
supportObject - key ngNonBindableDirective angular.js:2702 
factory - name ngNonBindableDirective angular.js:2723 
provider - name ngNonBindableDirective angular.js:2712 
supportObject - key ngPluralizeDirective angular.js:2702 
factory - name ngPluralizeDirective angular.js:2723 
provider - name ngPluralizeDirective angular.js:2712 
supportObject - key ngRepeatDirective angular.js:2702 
factory - name ngRepeatDirective angular.js:2723 
provider - name ngRepeatDirective angular.js:2712 
supportObject - key ngShowDirective angular.js:2702 
factory - name ngShowDirective angular.js:2723 
provider - name ngShowDirective angular.js:2712 
supportObject - key ngSubmitDirective angular.js:2702 
factory - name ngSubmitDirective angular.js:2723 
provider - name ngSubmitDirective angular.js:2712 
supportObject - key ngStyleDirective angular.js:2702 
factory - name ngStyleDirective angular.js:2723 
provider - name ngStyleDirective angular.js:2712 
supportObject - key ngSwitchDirective angular.js:2702 
factory - name ngSwitchDirective angular.js:2723 
provider - name ngSwitchDirective angular.js:2712 
supportObject - key ngSwitchWhenDirective angular.js:2702 
factory - name ngSwitchWhenDirective angular.js:2723 
provider - name ngSwitchWhenDirective angular.js:2712 
supportObject - key ngSwitchDefaultDirective angular.js:2702 
factory - name ngSwitchDefaultDirective angular.js:2723 
provider - name ngSwitchDefaultDirective angular.js:2712 
supportObject - key ngOptionsDirective angular.js:2702 
factory - name ngOptionsDirective angular.js:2723 
provider - name ngOptionsDirective angular.js:2712 
supportObject - key ngViewDirective angular.js:2702 
factory - name ngViewDirective angular.js:2723 
provider - name ngViewDirective angular.js:2712 
supportObject - key ngTranscludeDirective angular.js:2702 
factory - name ngTranscludeDirective angular.js:2723 
provider - name ngTranscludeDirective angular.js:2712 
supportObject - key ngModelDirective angular.js:2702 
factory - name ngModelDirective angular.js:2723 
provider - name ngModelDirective angular.js:2712 
supportObject - key ngListDirective angular.js:2702 
factory - name ngListDirective angular.js:2723 
provider - name ngListDirective angular.js:2712 
supportObject - key ngChangeDirective angular.js:2702 
factory - name ngChangeDirective angular.js:2723 
provider - name ngChangeDirective angular.js:2712 
supportObject - key requiredDirective angular.js:2702 
factory - name requiredDirective angular.js:2723 
provider - name requiredDirective angular.js:2712 
supportObject - key ngRequiredDirective angular.js:2702 
factory - name ngRequiredDirective angular.js:2723 
provider - name ngRequiredDirective angular.js:2712 
supportObject - key ngValueDirective angular.js:2702 
factory - name ngValueDirective angular.js:2723 
provider - name ngValueDirective angular.js:2712 
supportObject - key ngMultipleDirective angular.js:2702 
factory - name ngMultipleDirective angular.js:2723 
provider - name ngMultipleDirective angular.js:2712 
supportObject - key ngSelectedDirective angular.js:2702 
factory - name ngSelectedDirective angular.js:2723 
provider - name ngSelectedDirective angular.js:2712 
supportObject - key ngCheckedDirective angular.js:2702 
factory - name ngCheckedDirective angular.js:2723 
provider - name ngCheckedDirective angular.js:2712 
supportObject - key ngDisabledDirective angular.js:2702 
factory - name ngDisabledDirective angular.js:2723 
provider - name ngDisabledDirective angular.js:2712 
supportObject - key ngReadonlyDirective angular.js:2702 
factory - name ngReadonlyDirective angular.js:2723 
provider - name ngReadonlyDirective angular.js:2712 
supportObject - key ngSrcDirective angular.js:2702 
factory - name ngSrcDirective angular.js:2723 
provider - name ngSrcDirective angular.js:2712 
supportObject - key ngHrefDirective angular.js:2702 
factory - name ngHrefDirective angular.js:2723 
provider - name ngHrefDirective angular.js:2712 
supportObject - key ngClickDirective angular.js:2702 
factory - name ngClickDirective angular.js:2723 
provider - name ngClickDirective angular.js:2712 
supportObject - key ngDblclickDirective angular.js:2702 
factory - name ngDblclickDirective angular.js:2723 
provider - name ngDblclickDirective angular.js:2712 
supportObject - key ngMousedownDirective angular.js:2702 
factory - name ngMousedownDirective angular.js:2723 
provider - name ngMousedownDirective angular.js:2712 
supportObject - key ngMouseupDirective angular.js:2702 
factory - name ngMouseupDirective angular.js:2723 
provider - name ngMouseupDirective angular.js:2712 
supportObject - key ngMouseoverDirective angular.js:2702 
factory - name ngMouseoverDirective angular.js:2723 
provider - name ngMouseoverDirective angular.js:2712 
supportObject - key ngMouseoutDirective angular.js:2702 
factory - name ngMouseoutDirective angular.js:2723 
provider - name ngMouseoutDirective angular.js:2712 
supportObject - key ngMousemoveDirective angular.js:2702 
factory - name ngMousemoveDirective angular.js:2723 
provider - name ngMousemoveDirective angular.js:2712 
supportObject - key ngMouseenterDirective angular.js:2702 
factory - name ngMouseenterDirective angular.js:2723 
provider - name ngMouseenterDirective angular.js:2712 
supportObject - key ngMouseleaveDirective angular.js:2702 
factory - name ngMouseleaveDirective angular.js:2723 
provider - name ngMouseleaveDirective angular.js:2712 
supportObject - key 
Object {$anchorScroll: function, $browser: function, $cacheFactory: function, $controller: function, $document: function…} 
angular.js:2702 
provider - name $anchorScroll angular.js:2712 
provider - name $browser angular.js:2712 
provider - name $cacheFactory angular.js:2712 
provider - name $controller angular.js:2712 
provider - name $document angular.js:2712 
provider - name $exceptionHandler angular.js:2712 
provider - name $filter angular.js:2712 
supportObject - key currencyFilter angular.js:2702 
factory - name currencyFilter angular.js:2723 
provider - name currencyFilter angular.js:2712 
supportObject - key dateFilter angular.js:2702 
factory - name dateFilter angular.js:2723 
provider - name dateFilter angular.js:2712 
supportObject - key filterFilter angular.js:2702 
factory - name filterFilter angular.js:2723 
provider - name filterFilter angular.js:2712 
supportObject - key jsonFilter angular.js:2702 
factory - name jsonFilter angular.js:2723 
provider - name jsonFilter angular.js:2712 
supportObject - key limitToFilter angular.js:2702 
factory - name limitToFilter angular.js:2723 
provider - name limitToFilter angular.js:2712 
supportObject - key lowercaseFilter angular.js:2702 
factory - name lowercaseFilter angular.js:2723 
provider - name lowercaseFilter angular.js:2712 
supportObject - key numberFilter angular.js:2702 
factory - name numberFilter angular.js:2723 
provider - name numberFilter angular.js:2712 
supportObject - key orderByFilter angular.js:2702 
factory - name orderByFilter angular.js:2723 
provider - name orderByFilter angular.js:2712 
supportObject - key uppercaseFilter angular.js:2702 
factory - name uppercaseFilter angular.js:2723 
provider - name uppercaseFilter angular.js:2712 
provider - name $interpolate angular.js:2712 
provider - name $http angular.js:2712 
provider - name $httpBackend angular.js:2712 
provider - name $location angular.js:2712 
provider - name $log angular.js:2712 
provider - name $parse angular.js:2712 
provider - name $route angular.js:2712 
provider - name $routeParams angular.js:2712 
provider - name $rootScope angular.js:2712 
provider - name $q angular.js:2712 
provider - name $sniffer angular.js:2712 
provider - name $templateCache angular.js:2712 
provider - name $timeout angular.js:2712 
provider - name $window angular.js:2712 
decorator - serviceName $rootScope angular.js:2742 
supportObject - key $rootElement angular.js:2702 
factory - name $rootElement angular.js:2723 
provider - name $rootElement angular.js:2712 
--------------------------------------------- 
ngDirective testFn() angular.js:12363 
TestFn script1.js:3 
ngDirective - scope.$watch test angular.js:12366 
TestFn script1.js:3

來源

2013-02-25 DraganS

我只看到一個http://jsfiddle.net/grendian/CLkAV/ – grendian 2013-02-25 23:25:27

在我的控制檯中，我看到（2）TestFn fiddle.jshell.net:23（兩次） - chrome。 FF alos顯示TestFn/grend...V/show/（第23行）兩次。我丟失了IE圖標 – DraganS 2013-02-25 23:31:03

UPDATE：

插值視圖表達式並運行摘要週期Angular將重新運行/插入每個表達式至少兩次，以便在渲染之前對其進行「標準化」（請參閱此github issue和此SO post）。

因此，這是預期的行爲。對於這個問題，如果你在視圖表達式中使用範圍方法，這些方法應該是冪等的（它們應該在給定相同輸入的情況下提供相同的輸出）。

來源

2013-02-25 23:30:03 Stewie

在這個例子中，我沒有使用routeProvider。示例可以在jsfiddle.net/grendian/CLkAV上找到。用於學習angularJS的測試應用程序使用routeProvider，但有相同的行爲 - 表達式評估2次。實際上，它發生在我更改頁面（通過AJAX）時，角度已經初始化。我把斷點放在$ http.get（src，{cache：$ templateCache}）之後。success（function（response）（angular.js）因此AJAX只加載一次頁面 – DraganS 2013-02-25 23:33:31

我現在意識到我的'Answer '有同等數量的答案和問題，應該是一條評論。正在更新... – Stewie 2013-02-25 23:51:39

感謝您的幫助。 – DraganS 2013-02-26 00:07:16

回答

相關問題