Observe two variables in one $watch

Posted on   |   In ,   |  

####Objective####

  1. Example of [$watch][0]

<!-- more --> <iframe style="margin: 20px 0; width: 100%; height: 300px" src="http://embed.plnkr.co/o3cnXm" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

MarkupGithub
1
2
3
<div>X: <input type='text' ng-model='x'/></div>
<div>Y: <input type='text' ng-model='y'/></div>
<div data-xng-watcher x='' y=''></div>

AngularJSGithub
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
var app = angular.module('ngApp', [])
    .directive('xngWatcher', function () {
        "use strict";
        return {
            template: '<span>X:, Y:</span>',
            link: function (scope, elm, iAttrs) {
                scope.$watch(function () {
                    return {x: iAttrs.x, y: iAttrs.y};
                }, function (newVal, oldVal, scope) {
                    console.log('change !');
                    scope.x = newVal.x;
                    scope.y = newVal.y;
                }, true);
            }
        };
    });
[0]:http://docs.angularjs.org/api/ng.$rootScope.Scope#$watch