式評価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>

ログは1つではありません。何が間違っていたのですか？

更新：

は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

私は1つだけ見ています。http://jsfiddle.net/grendian/CLkAV/ – grendian

私のコンソールには、（2）TestFn fiddle.jshell.net:23（2回） - chromeがあります。 FFのalosはTestFn /grend...V/show/（行23）を2回表示します。私はIEのアイコンを失った – DraganS

UPDATE：

ビュー式を補間してダイジェストサイクルを実行する場合、Angularはレンダリング前に「正規化」するために、各式を少なくとも2回再実行/補間します（github issueおよびSO postを参照）。

このように、これは予想される動作です。

そのため、ビュー式でスコープメソッドを使用している場合、これらのメソッドは冪等でなければなりません（同じ入力で同じ出力を提供する必要があります）。

出典

2013-02-25 23:30:03 Stewie

この例では、私はrouteProviderを使用しなかった。サンプルはjsfiddle.net/grendian/CLkAVにあります。 angularJSの学習に使用されるテストアプリケーションはrouteProviderを使用しますが、同じ動作があります。式は2回評価されます。実際には、AJAXのページを変更しているので、角度は既に初期化されています。私はAJAXがページを一度だけロードしているので、$ http.get（src、{cache：$ templateCache}）の後にブレークポイントを置いています。 – DraganS

あなたのお手伝いをありがとう。 – Stewie

あなたのお手伝いをありがとうございます。 – DraganS

答えて

関連する問題