Question

我真的很惊讶下面的函数绑定工作

<!DOCTYPE html>
<html ng-app="App" ng-controller="mainCtrl as main">
<head lang="en">
    <meta charset="UTF-8">
    <script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script type="application/javascript">
        var Controllers;
        (function (Controllers) {
            var mainCtrl = (function () {
                function mainCtrl() {
                    this.a = 0;
                    this.b = 0;
                }

                mainCtrl.prototype.getSum = function () {
                    return this.a + this.b;
                };
                return mainCtrl;
            })();
            Controllers.mainCtrl = mainCtrl;
        })(Controllers || (Controllers = {}));

        angular.module("App", []).controller("mainCtrl", Controllers.mainCtrl);
    </script>
</head>
<body>
a = <input type="number" ng-model="main.a">
<br/>
b = <input type="number" ng-model="main.b">
<br/>
Sum is = {{main.getSum()}}
</body>
</html>

现在角度如何更新函数绑定？

Answer 1

它知道需要更新其他任何东西的方式相同 - 脏检查。

Angular完全不知道它绑定在函数或值上的事实。它的工作原理是保持一系列观察者，并检查那些观察者。

重要的是Angular会监视你绑定的表达式，而不是范围对象本身。

让我们看一下非常简单版本的正在发生的事情。

所以像（简单化）：

 {{main.getSum()}}

获取'编译'到（类似）：

var watcher = function(){ return main.getSum(); }

反过来，它被添加到观察者阵列中。做的事情如下：

 // run this 'digest' when any property is 'dirty', for example after calling $apply
 while(anyDirtyWatchers){
     // go through all watchers, for instance
     var newValue = watcher();
     if(newValue !== oldValue){
        anyDirtyWatchers = true; // keep digesting, in practice this has a limited number
        oldValue = newValue;     // of iterations
     }
 }

因此，正如您所看到的，绑定到函数值没有问题（也不应该存在）

这是一个非常简单的概述正在发生的事情。我希望你能得到全面的想法。

绑定到AngularJS中的函数

1 个答案: