表达式计算 2 次

本文介绍了表达式计算 2 次的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在下面的例子中:

test.html

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

test1.html


{{testFn()}}

script1.js

function AppController($scope) {$scope.testFn = function() {console.log("TestFn");返回测试"；}}

碰巧 fn testFn 执行了 4 次.我希望在控制台中只看到 2 个日志.甚至，如果我删除

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

有 2 个日志，而不仅仅是一个.我做错了什么?

更新:

angular.js

//将console.log 添加到原始代码中var ngBindDirective = ngDirective(function(scope, element, attr) {console.log("ngDirective", attr.ngBind);element.addClass('ng-binding').data('$binding', attr.ngBind);scope.$watch(attr.ngBind, 函数 ngBindWatchAction(value) {console.log("ngDirective - scope.$watch", value);element.text(value == undefined ? '' : value);});});

test.html

<html ng-app ng-controller="AppController"><头><script type="text/javascript" src="angular.js"></script><script type="text/javascript" src="script1.js"></script><身体><div ng-bind="testFn()"></span></html>

控制台

createInjector - modulesToLoad undefined angular.js:2666loadModules 未定义 angular.js:2756createInjector - modulesToLoad[ng"，数组[2]]angular.js:2666加载模块[ng"，数组[2]]angular.js:2756loadModules ["ngLocale"] angular.js:2756loadModules [] angular.js:2756supportObject - 键 $locale angular.js:2702提供者 - 名称 $locale angular.js:2712supportObject - 键 $compile angular.js:2702提供者 - 名称 $compile angular.js:2712supportObject - 键 aDirective angular.js:2702工厂 - 名称 aDirective angular.js:2723提供者 - 命名 aDirective angular.js:2712supportObject - key inputDirective angular.js:2702工厂 - 名称 inputDirective angular.js:2723提供者 - 名称 inputDirective angular.js:2712supportObject - 关键 textareaDirective angular.js:2702工厂 - 名称 textareaDirective angular.js:2723提供者 - 名称 textareaDirective angular.js:2712supportObject - 键 formDirective angular.js:2702工厂 - 名称 formDirective angular.js:2723提供者 - 名称 formDirective angular.js:2712supportObject - 关键脚本指令 angular.js:2702工厂 - 名称 scriptDirective angular.js:2723提供者 - 名称 scriptDirective angular.js:2712supportObject - 键 selectDirective angular.js:2702工厂 - 名称 selectDirective angular.js:2723提供者 - 名称 selectDirective angular.js:2712supportObject - 键 styleDirective angular.js:2702工厂 - 名称 styleDirective angular.js:2723提供者 - 名称 styleDirective angular.js:2712supportObject - 关键选项指令 angular.js:2702factory - name optionDirective angular.js:2723provider - name optionDirective angular.js:2712supportObject - 关键 ngBindDirective angular.js:2702工厂 - 名称 ngBindDirective angular.js:2723提供者 - 名称 ngBindDirective angular.js:2712supportObject - 关键 ngBindHtmlUnsafeDirective angular.js:2702工厂 - 名称 ngBindHtmlUnsafeDirective angular.js:2723提供者 - 名称 ngBindHtmlUnsafeDirective angular.js:2712supportObject - 关键 ngBindTemplateDirective angular.js:2702工厂 - 名称 ngBindTemplateDirective angular.js:2723提供者 - 名称 ngBindTemplateDirective angular.js:2712supportObject - 关键 ngClassDirective angular.js:2702工厂 - 名称 ngClassDirective angular.js:2723提供者 - 名称 ngClassDirective angular.js:2712supportObject - 关键 ngClassEvenDirective angular.js:2702工厂 - 名称 ngClassEvenDirective angular.js:2723提供者 - 名称 ngClassEvenDirective angular.js:2712supportObject - 关键 ngClassOddDirective angular.js:2702工厂 - 名称 ngClassOddDirective angular.js:2723提供者 - 名称 ngClassOddDirective angular.js:2712supportObject - 关键 ngCspDirective angular.js:2702工厂 - 名称 ngCspDirective angular.js:2723提供者 - 名称 ngCspDirective angular.js:2712supportObject - 关键 ngCloakDirective angular.js:2702工厂 - 名称 ngCloakDirective angular.js:2723提供者 - 名称 ngCloakDirective angular.js:2712supportObject - 关键 ngControllerDirective angular.js:2702工厂 - 名称 ngControllerDirective angular.js:2723提供者 - 名称 ngControllerDirective angular.js:2712supportObject - 关键 ngFormDirective angular.js:2702工厂 - 名称 ngFormDirective angular.js:2723提供者 - 名称 ngFormDirective angular.js:2712supportObject - 关键 ngHideDirective angular.js:2702工厂 - 名称 ngHideDirective angular.js:2723提供者 - 名称 ngHideDirective angular.js:2712supportObject - 关键 ngIncludeDirective angular.js:2702工厂 - 名称 ngIncludeDirective angular.js:2723提供者 - 名称 ngIncludeDirective angular.js:2712supportObject - 关键 ngInitDirective angular.js:2702工厂 - 名称 ngInitDirective angular.js:2723提供者 - 名称 ngInitDirective angular.js:2712supportObject - 关键 ngNonBindableDirective angular.js:2702工厂 - 名称 ngNonBindableDirective angular.js:2723提供者 - 名称 ngNonBindableDirective angular.js:2712supportObject - 关键 ngPluralizeDirective angular.js:2702工厂 - 名称 ngPluralizeDirective angular.js:2723提供者 - 名称 ngPluralizeDirective angular.js:2712supportObject - 关键 ngRepeatDirective angular.js:2702工厂 - 名称 ngRepeatDirective angular.js:2723提供者 - 名称 ngRepeatDirective angular.js:2712supportObject - 关键 ngShowDirective angular.js:2702工厂 - 名称 ngShowDirective angular.js:2723提供者 - 名称 ngShowDirective angular.js:2712supportObject - 关键 ngSubmitDirective angular.js:2702工厂 - 名称 ngSubmitDirective angular.js:2723提供者 - 名称 ngSubmitDirective angular.js:2712supportObject - 关键 ngStyleDirective angular.js:2702工厂 - 名称 ngStyleDirective angular.js:2723提供者 - 名称 ngStyleDirective angular.js:2712supportObject - 关键 ngSwitchDirective angular.js:2702工厂 - 名称 ngSwitchDirective angular.js:2723提供者 - 名称 ngSwitchDirective angular.js:2712supportObject - 关键 ngSwitchWhenDirective angular.js:2702工厂 - 名称 ngSwitchWhenDirective angular.js:2723提供者 - 名称 ngSwitchWhenDirective angular.js:2712supportObject - 关键 ngSwitchDefaultDirective angular.js:2702工厂 - 名称 ngSwitchDefaultDirective angular.js:2723提供者 - 名称 ngSwitchDefaultDirective angular.js:2712supportObject - 关键 ngOptionsDirective angular.js:2702工厂 - 名称 ngOptionsDirective angular.js:2723提供者 - 名称 ngOptionsDirective angular.js:2712supportObject - 关键 ngViewDirective angular.js:2702工厂 - 名称 ngViewDirective angular.js:2723提供者 - 名称 ngViewDirective angular.js:2712supportObject - 关键 ngTranscludeDirective angular.js:2702工厂 - 名称 ngTranscludeDirective angular.js:2723提供者 - 名称 ngTranscludeDirective angular.js:2712supportObject - 关键 ngModelDirective angular.js:2702工厂 - 名称 ngModelDirective angular.js:2723提供者 - 名称 ngModelDirective angular.js:2712supportObject - 关键 ngListDirective angular.js:2702工厂 - 名称 ngListDirective angular.js:2723提供者 - 名称 ngListDirective angular.js:2712supportObject - 关键 ngChangeDirective angular.js:2702工厂 - 名称 ngChangeDirective angular.js:2723提供者 - 名称 ngChangeDirective angular.js:2712supportObject - key requiredDirective angular.js:2702工厂 - name requiredDirective angular.js:2723provider - name requiredDirective angular.js:2712supportObject - 关键 ngRequiredDirective angular.js:2702工厂 - 名称 ngRequiredDirective angular.js:2723提供者 - 名称 ngRequiredDirective angular.js:2712supportObject - 关键 ngValueDirective angular.js:2702工厂 - 名称 ngValueDirective angular.js:2723提供者 - 名称 ngValueDirective angular.js:2712supportObject - 关键 ngMultipleDirective angular.js:2702工厂 - 名称 ngMultipleDirective angular.js:2723提供者 - 名称 ngMultipleDirective angular.js:2712supportObject - 关键 ngSelectedDirective angular.js:2702工厂 - 名称 ngSelectedDirective angular.js:2723提供者 - 名称 ngSelectedDirective angular.js:2712supportObject - 关键 ngCheckedDirective angular.js:2702工厂 - 名称 ngCheckedDirective angular.js:2723提供者 - 名称 ngCheckedDirective angular.js:2712supportObject - 关键 ngDisabledDirective angular.js:2702工厂 - 名称 ngDisabledDirective angular.js:2723提供者 - 名称 ngDisabledDirective angular.js:2712supportObject - 关键 ngReadonlyDirective angular.js:2702工厂 - 名称 ngReadonlyDirective angular.js:2723提供者 - 名称 ngReadonlyDirective angular.js:2712supportObject - 关键 ngSrcDirective angular.js:2702工厂 - 名称 ngSrcDirective angular.js:2723提供者 - 名称 ngSrcDirective angular.js:2712supportObject - 关键 ngHrefDirective angular.js:2702工厂 - 名称 ngHrefDirective angular.js:2723提供者 - 名称 ngHrefDirective angular.js:2712supportObject - 键 ngClickDirective angular.js:2702工厂 - 名称 ngClickDirective angular.js:2723提供者 - 名称 ngClickDirective angular.js:2712supportObject - 键 ngDblclickDirective angular.js:2702工厂 - 名称 ngDblclickDirective angular.js:2723提供者 - 名称 ngDblclickDirective angular.js:2712supportObject - 关键 ngMousedownDirective angular.js:2702工厂 - 名称 ngMousedownDirective angular.js:2723提供者 - 名称 ngMousedownDirective angular.js:2712supportObject - 关键 ngMouseupDirective angular.js:2702工厂 - 名称 ngMouseupDirective angular.js:2723提供者 - 名称 ngMouseupDirective angular.js:2712supportObject - 关键 ngMouseoverDirective angular.js:2702工厂 - 名称 ngMouseoverDirective angular.js:2723提供者 - 名称 ngMouseoverDirective angular.js:2712supportObject - 关键 ngMouseoutDirective angular.js:2702工厂 - 名称 ngMouseoutDirective angular.js:2723提供者 - 名称 ngMouseoutDirective angular.js:2712supportObject - 关键 ngMousemoveDirective angular.js:2702工厂 - 名称 ngMousemoveDirective angular.js:2723提供者 - 名称 ngMousemoveDirective angular.js:2712supportObject - 关键 ngMouseenterDirective angular.js:2702工厂 - 名称 ngMouseenterDirective angular.js:2723提供者 - 名称 ngMouseenterDirective angular.js:2712supportObject - 关键 ngMouseleaveDirective angular.js:2702工厂 - 名称 ngMouseleaveDirective angular.js:2723提供者 - 名称 ngMouseleaveDirective angular.js:2712supportObject - 键对象 {$anchorScroll: 函数, $browser: 函数, $cacheFactory: 函数, $controller: 函数, $document: 函数...}angular.js:2702提供者 - 名称 $anchorScroll angular.js:2712提供者 - 名称 $browser angular.js:2712提供者 - 名称 $cacheFactory angular.js:2712提供者 - 名称 $controller angular.js:2712提供者 - 名称 $document angular.js:2712提供者 - 名称 $exceptionHandler angular.js:2712提供者 - 名称 $filter angular.js:2712supportObject - 关键货币过滤器 angular.js:2702工厂 - 名称货币过滤器 angular.js:2723提供者 - 名称货币过滤器 angular.js:2712supportObject - 关键日期过滤器 angular.js:2702工厂 - 名称 dateFilter angular.js:2723提供者 - 名称 dateFilter angular.js:2712supportObject - 关键 filterFilter angular.js:2702工厂 - 名称 filterFilter angular.js:2723提供者 - 名称 filterFilter angular.js:2712supportObject - 关键 jsonFilter angular.js:2702工厂 - 名称 jsonFilter angular.js:2723提供者 - 名称 jsonFilter angular.js:2712supportObject - 键 limitToFilter angular.js:2702工厂 - 名称 limitToFilter angular.js:2723提供者 - 名称 limitToFilter angular.js:2712supportObject - 键小写过滤器 angular.js:2702工厂 - 名称小写过滤器 angular.js:2723提供者 - 名称小写过滤器 angular.js:2712supportObject - 键号过滤器 angular.js:2702工厂 - 名称编号过滤器 angular.js:2723provider - name numberFilter angular.js:2712supportObject - 键 orderByFilter angular.js:2702工厂 - 名称 orderByFilter angular.js:2723提供者 - 名称 orderByFilter angular.js:2712supportObject - 键大写过滤器 angular.js:2702工厂 - 名称大写过滤器 angular.js:2723提供者 - 名称大写过滤器 angular.js:2712提供者 - 名称 $interpolate angular.js:2712提供者 - 名称 $http angular.js:2712提供者 - 名称 $httpBackend angular.js:2712提供者 - 名称 $location angular.js:2712提供者 - 名称 $log angular.js:2712提供者 - 名称 $parse angular.js:2712提供者 - 名称 $route angular.js:2712提供者 - 名称 $routeParams angular.js:2712提供者 - 名称 $rootScope angular.js:2712提供者 - 名称 $q angular.js:2712提供者 - 名称 $sniffer angular.js:2712提供者 - 名称 $templateCache angular.js:2712提供者 - 名称 $timeout angular.js:2712提供者 - 名称 $window angular.js:2712装饰器 - serviceName $rootScope angular.js:2742supportObject - 键 $rootElement angular.js:2702工厂 - 名称 $rootElement angular.js:2723提供者 - 名称 $rootElement angular.js:2712---------------------------------------------ngDirective testFn() angular.js:12363TestFn script1.js:3ngDirective - scope.$watch 测试 angular.js:12366TestFn script1.js:3

解决方案

更新:

当插入视图表达式并运行摘要循环时，Angular 将重新运行/插入每个表达式至少两次，以便在渲染之前对其进行规范化"(参见此 github 问题和这个 SO 帖子).

因此，这是预期的行为.

就此而言，如果您在视图表达式中使用作用域方法，这些方法应该是幂等的(它们应该提供相同的输出给相同的输入).

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

happen that fn testFn executes 4 times. I expected to see just 2 logs in console. Even, if I remove

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

there are 2 logs, not just one. What did I wrong?

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>

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

解决方案

UPDATE:

When interpolating the view expressions and running the digest cycle Angular will re-run/interpolate each expression at least twice, in order to 'normalize it' before rendering (See this github issue and this SO post).

Thus, this is expected behavior.

For that matter, if you're using scope methods in view expressions, these methods should be idempotent (they should provide the same output given the same input).

这篇关于表达式计算 2 次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..