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

ddouble 发布于 2015/10/26 18:49
阅读 1K+
收藏 0

初学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>   



加载中
0
ddouble
ddouble

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

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

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

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