绑定到AngularJS中的函数

debugcn 发表于 Dev

马克西姆·巴拉甘斯基（Maxim Balaganskiy）

我很惊讶下面的功能绑定起作用

<!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>

现在需要更新功能绑定的角度如何？

本杰明·格伦鲍姆（Benjamin Gruenbaum）

以相同的方式知道它需要更新其他所有内容-脏检查。

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
     }
 }

因此，如您所见，绑定到函数值没有问题（也不应该有任何问题）

这是对正在发生的事情的非常简单的概述。我希望您有整体想法。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。