Watching a property of global object in Angular JS

Question

Suppose that you have an object in the global scope (I know it's bad. It's just for demo purposes), and you want to watch a property of that object in Angular JS.

var human = {
    name: 'Somebody'
};
var app = angular.module('app', []);
app.controller('watchController', function ($scope) {
    $scope.$watch('human.name', function () {
        alert('foo is changed');
    });
    $scope.doWatch = function () {
        human.name = new Date().toString();
    };
});

and this HTML:

<div ng-app='app'>
    <div ng-controller='watchController'>
        <input type='button' value='Invoke' ng-click='doWatch()' />
    </div>
</div>

How do you do that? This code doesn't work. See this fiddle.

"I know it's bad" - so don't do it. Map your model objects to view models and watch those instead. Also - to see how watchers work see teropa.info/blog/2013/11/03/… — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented Nov 26, 2013 at 13:01
@BenjaminGruenbaum - I guess plain curiosity is good enough reason ;) — kamituel
– kamituel, Commented Nov 26, 2013 at 13:02

AlwaysALearner · Accepted Answer · 2013-11-26 13:06:50Z

4

$watch accepts a function as the first parameter. A change in the return value triggers a call to the listener.:

$scope.$watch(function(){
    return human.name;
}, function () {
    console.log('foo is changed');
});

Fiddle

edited Nov 26, 2013 at 13:06

answered Nov 26, 2013 at 12:58

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Watching a property of global object in Angular JS

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