espressione valutata 2 volte

Nel seguente esempio:espressione valutata 2 volte

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

accadere che esegue fn testFn 4 volte. Mi aspettavo di vedere solo 2 log in console. Anche se rimuovo

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

ci sono 2 registri, non solo uno. Cosa ho sbagliato?

aggiornamento:

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>

console

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

fonte

2013-02-25 DraganS

Sto vedendo solo uno http://jsfiddle.net/grendian/CLkAV/ – grendian

Nella mia console vedo (2) TestFn fiddle.jshell.net:23 (due volte) - chrome. FF alos mostra TestFn /grend...V/show/ (riga 23) due volte. Ho perso l'icona di IE – DraganS

UPDATE:

Quando si interpolano le espressioni di visualizzazione ed è in esecuzione il ciclo di digest Angular eseguirà nuovamente/interpola ogni espressione almeno due volte, per "normalizzarlo" prima del rendering (vedere questo github issue e questo SO post).

Quindi, questo è il comportamento previsto.

Se è per questo che si utilizzano i metodi di ambito nelle espressioni di visualizzazione, questi metodi dovrebbero essere idempotenti (dovrebbero fornire lo stesso output dato lo stesso input).

fonte

2013-02-25 23:30:03 Stewie

In questo esempio non ho usato routeProvider. Il campione può essere trovato su jsfiddle.net/grendian/CLkAV. L'app di prova utilizzata per imparare angularJS utilizza routeProvider, ma esiste lo stesso comportamento: le espressioni vengono valutate 2 volte. In realtà, è come ho cambiato la pagina (di AJAX), così angolare era già inizializzato. Ho messo il break point dopo la riga $ http.get (src, {cache: $ templateCache}.) Success (function (response) (angular.js) quindi AJAX sta caricando la pagina solo una volta. – DraganS

Mi sono reso conto che la mia risposta 'ha la stessa quantità di risposte e domande. Dovrebbe essere un commento Aggiornamento ... – Stewie

Grazie per il vostro aiuto. – DraganS

espressione valutata 2 volte

risposta

Problemi correlati