Understanding Angular data binding

Question

While reading about Angular data-binding - came across advice -

"Due to the nature of JavaScript itself and how it passes by value vs. reference, it’s considered a best-practice in Angular to bind references in the views by an attribute on an object, rather than the raw object itself."

source: ng-book

Question: 1. What does it mean - binding references rather than objects?

This is accompanied by code snippet.

JS Code:

var module = angular.module("app", []);
//controller uses $timeout
module.controller("MyController", function ($scope, $timeout) {
    var updateClock = function () {
        $scope.clock = {};
        $scope.clock.now = new Date();
        $timeout(function () {
            $scope.clock.now = new Date();
            updateClock();
        }, 1000);
    };
    updateClock();
})

HTML:

<body data-ng-app="app">
<div data-ng-controller="MyController">
    <h5>Hello {{clock.now}}</h5>
</div>
</body>

Question: 2. If I remove this line $scope.clock.now = new Date(); from outside the $timeout - it does not work. Although clock.now is being assigned date object in $timeout. Why?

jmunsch · Accepted Answer

Q1:

it has some stuff to do with readability and this and scope context
{{this.now}} vs {{clock.now}}
the data binding on the scope might not trigger a digest cycle
but even then using $scope doesn't resolve debugging issues, and readability entirely

Q2:

Probably because it needs to re-render, or hasn't run through the digest cycle yet
Anyway to trigger a method when Angular is done adding scope updates to the DOM?
Angular $scope.$apply vs $timeout as a safe $apply
AngularJS : $evalAsync vs $timeout
How do I use $scope.$watch and $scope.$apply in AngularJS?

Here are three examples, I prefer the syntax of Controller1 it makes debugging easier imo:

var module = angular.module("app", []);
module.controller("Controller1", function ($timeout) {
        var vm = this
        vm.clock = {now: 'its loading'};
        vm.now = new Date();
        var updateClock = function () {
            $timeout(function () {
                vm.clock.now = new Date();
                updateClock();
            }, 3000);
        };
        updateClock();
    })

module.controller("Controller2", function ($scope, $timeout) {
        $scope.clock = {now: 'its loading'};
        $scope.now = new Date();
        var updateClock = function () {
            $timeout(function () {
                $scope.clock.now = new Date();
                updateClock();
            }, 3000);
        };
        updateClock();
    })

module.controller("Controller3", function ($timeout) {
        var vm = this
        var updateClock = function () {
            $timeout(function () {
                try {
                  vm.clock.now = new Date();
                } catch(e){
                  vm.clock = {}
                  vm.clock.now = 'oops'
                }
                updateClock();
            }, 3000);
        };
        updateClock();
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body data-ng-app="app">
<div data-ng-controller="Controller1 as vm">
    <h6>vm.clock.now {{vm.clock.now}} vm.now {{vm.now}}</h6>
    <h6>vm: {{vm}}</h6>
</div>

<div data-ng-controller="Controller2">
    <h6>$scope.clock.now {{clock.now}} $scope.now {{this.now}}</h6>
    <h6>this is confusing {{this}}</h6>
</div>  
<div data-ng-controller="Controller3 as vm">
    <h1>{{vm.clock.now}}</h1>
    <h6>nice scope: {{vm}}</h6>
</div>

</body>

Also see:

What's the difference between ng-model and ng-bind
AngularJS : Why ng-bind is better than {{}} in angular?

Understanding Angular data binding

Tags:

javascript

angularjs

data-binding

Amit G

1 Answers

jmunsch

Recent Activity

Donate For Us

Understanding Angular data binding

Tags:

javascript

angularjs

data-binding

Amit G

1 Answers

jmunsch

Related questions

Recent Activity

Donate For Us