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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值