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

最新推荐文章于 2024-04-28 04:38:24 发布

gohike

最新推荐文章于 2024-04-28 04:38:24 发布

阅读量3.5k

点赞数

分类专栏： angular 文章标签： angular 数据绑定 digest

本文链接：https://blog.csdn.net/gohike/article/details/54436256

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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.//懵逼