angular 函数表达式执行两次的问题

来源：互联网发布：迷宫寻路算法编辑：程序博客网时间：2024/05/16 10:48

angular.js的双向数据绑定在表单验证方面非常便捷，在数据查询，todolist以及类似的复杂单页面应用方面表现得非常强大，今天遇到了一个问题，双括号内绑定的函数会执行两次，代码是这样的：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title></title>    <script type="text/javascript" src="./ng/angular-1.5.0.js"></script></head><body>    <div ng-app="myApp" ng-controller="myCtr">        <input type="text" name="" ng-model="username">        <p>{{username}}</p>        <p>{{show()}}</p>    </div>    <script type="text/javascript">        var app = angular.module("myApp" ,[]);        app.controller("myCtr", function($scope) {            $scope.username = "hello";            $scope.show = function() {                console.log($scope.username);            }        })    </script></body></html>

开始的时候以为是书写格式的问题，没有在意，因为平时很少直接以表达式的形式调用函数，一般是通过事件进行触发，换一种写法就行了，后来想想，里面可能有一些有意思的东西呢，所以就通过google检索了一下“function in angular expression two times”，结果第二个就是答案：

In AngularJS, anything wrapped in double curly braces is an expression that gets evaluated at least once during the digest cycle.//在angular中，包裹在{{}}中的表达式在digest循环中都会获取值（$scope上的）AngularJS works by running the digest cycle continuously until nothing has changed. That's how it ensures the view is up-to-date. Since you called a function, it's running it once to get a value and then a second time to see that nothing has changed. On the next digest cycle, it will run at least once again.//为确保视图是实时更新的，angular的digest循环会一直循环，直到没有值发生变化，所以上面的表达式在第一次循环时获取值（也就是log输出），然后第二次确认没有值发生变化，所以还会再执行一次！It's generally a good idea to only call idempotent methods (like name) from the template for this very reason.//懵逼

那么digest循环到底是什么呢？它跟数据双向绑定到底什么关系呢？

如果想进一步了解，可以移步angularjs社区（http://community.angular.cn/A0a6）里面有非常详细的解释；

0 0