3
回答
这个基于 angularjs 的简单页面中,控制器函数为啥会在页面load后执行三次?
注册华为云得mate10,2.9折抢先购!>>>   

初学angularjs ...

下面这个基于 angularjs 的简单页面中,控制器函数 test() 为啥会在页面load后执行三次?

注意 console.log('call test ...'); 代码执行了三次,为啥?


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="//cdn.bootcss.com/angular.js/1.4.7/angular.min.js"></script>

    <script src="test.js"></script>
    <script type="application/javascript">
        angular.module('test', [])
            .controller('TTController', function() {
                this.test = function() {
                    console.log('call test ...');   // 这里为啥输出了三次?
                    return 'hello';
                };
            });
    </script>
</head>
<body>

<div ng-app="test" ng-controller="TTController as tt">
    <div>
        {{ tt.test() }}
    </div>
</div>

</body>
</html>   



举报
ddouble
发帖于2年前 3回/1K+阅
共有3个答案 最后回答: 2年前

上面的页面例子中,angularjs 的 dirty-checking 过程如下:

  1. 获取当前 test() 返回值 newValue
  2. newValue 和 oldValue 比较(从ng源码看初始oldValue值不与任何可能值相同)
  3. >> 如果 oldValue 值是脏的,重新计算 expression 的值,并更新oldValue 值(计算过程调用了 test()),最后触发了下一次 dirty-checking
  4. >> 如果 oldValue 不脏则 dirty-checking 结束

从上述过程看,test() 函数被执行了三次

这个就需要知道angular的dirty-checking机制了,结合网上的文章理解,再加个断点调试下,应该就明白了
--- 共有 2 条评论 ---
ddouble感谢 @双_双 的提示,跟踪源码后发现确实是脏值检查导致的结果。稍后我会贴出原理。 2年前 回复
随风所欲这跟脏值检测有关?我觉得是应该是编译初始相关吧! 2年前 回复
顶部