javascript - 表达式评估了 2 次

Question

在以下示例中：

测试.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 个日志，而不仅仅是一个。我做错了什么？

更新：

角.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);
  });
});

测试.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

score 5 · Accepted Answer

更新：

在插入视图表达式并运行摘要循环时，Angular 将至少重新运行/插入每个表达式两次，以便在渲染之前“对其进行规范化”（请参阅此github 问题和此SO 帖子）。

因此，这是预期的行为。

就此而言，如果您在视图表达式中使用范围方法，这些方法应该是幂等的（它们应该在给定相同输入的情况下提供相同的输出）。

javascript - 表达式评估了 2 次

1 回答 1

Related

Reference