Binding to a function in AngularJS

Question

I'm really surprised that the function binding below worked

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

How does angular now that it needs to update the function binding?

because angular is awesome!

bto.rdz
– bto.rdz

2014-04-19 13:32:39 +00:00
Commented Apr 19, 2014 at 13:32 — bto.rdz
– bto.rdz, Commented Apr 19, 2014 at 13:32

Benjamin Gruenbaum · Accepted Answer · 2014-04-19 13:36:04Z

The same way it knows it needs to update anything else - dirty checking.

Angular is completely agnostic to the fact it is binding over a function or a value. It works by keeping an array of watchers, and checking those watchers.

The important thing here is that Angular watches the expressions you bind to, and not the scope objects themselves.

Let's look at a very simplistic version of what's happening.

So something like (simplistic):

 {{main.getSum()}}

Gets 'compiled' to (something like):

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

In turn, it gets added to an array of watchers. Which do something like:

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

So, as you can see, there are no issues with binding to a function value (nor there should be any)

This was a very simplistic overview of what's happening. I hope you got the overall idea though.

Collectives™ on Stack Overflow

Binding to a function in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related