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

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


<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)里面有非常详细的解释;

你可能感兴趣的:(angular,angular,数据绑定,digest)