Expression was rated 2 times

Question

Expression was rated 2 times

In the following example:

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"; } }

it happens that fn testFn runs 4 times. I expected to see only 2 logs in the console. Even if I remove

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

There are 2 magazines, not one. What did I misunderstand?

UPDATED:

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>

Prefixes

 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

+5

javascript angularjs

Dragans Feb 25 '13 at 23:03

source share

1 answer

Stewie · Accepted Answer · 2013-02-25T23:30:03+0000

UPDATE:

When interpolating view expressions and starting a loop, Angular's digest will re-run / interpolate each expression at least twice to “normalize” it before rendering (see this github issue , and this is a SO post) .

So this is the expected behavior.

In this case, if you use scope methods in presentation expressions, these methods should be idempotent (they should provide the same output with the same input).

Expression was rated 2 times

More articles: