angularjs $watchGroup with controller as syntax

Question

Based on a bunch of Angular JS style guides I've read recently, it seems that the 'controller as' syntax for Angular JS controllers is preferred for several reasons.

I've seen examples of how to inject $scope in order to use special methods like $watch, $on, etc.

This example below shows how to successfully use $watch with the 'controller as' syntax:

$scope.$watch(angular.bind(this, function () { 
    return this.name;
}), function(value) {
    console.log('Name change to ' + value);
});

What I haven't found anywhere is how to use $watchGroup using this similar approach. Does anyone know how to do this?

Exactly the same way: $scope.$watchGroup

New Dev
– New Dev

2015-02-07 01:47:35 +00:00
Commented Feb 7, 2015 at 1:47 — New Dev
– New Dev, Commented Feb 7, 2015 at 1:47

Shuhei Kagawa · Accepted Answer · 2015-02-07 04:00:02Z

13

Let's say the controller has two properties, firstName and lastName. To invoke a function when either of them are changed, use an Array of functions as the first argument of $watchGroup.

var self = this;
$scope.$watchGroup([function() {
    return self.firstName;
}, function () {
    return self.lastName;
}], function(newValues, oldValues) {
    console.log('Name change to ' + newValues[0] + ' ' + newValues[1]);
});

Note that the newValues is an Array that contains new firstName and lastName.

answered Feb 7, 2015 at 4:00

Shuhei Kagawa

4,7771 gold badge35 silver badges31 bronze badges

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

Comments

Agustín Cassani · Accepted Answer · 2015-02-10 21:18:27Z

To make use of #watchGroup using controller as syntax, first you will have to declare your controller in the following way:

app.controller('Controller1', ['$scope', Controller1]);

function Controller1($scope) {
    var vm = this;
    vm.firstName = 'Agustin';
    vm.lastName = 'Cassani';
    vm.newVal = '';
    vm.oldVal = '';

    $scope.$watchGroup(['vm.firstName', 'vm.lastName'], function (newValue, oldValue) {
        vm.newVal = newValue;
        vm.oldVal = oldValue;
    });
}

As you can see, we have made a reference to "this" in the vm variable.

In your application routing configuration, you will have something like this, if you are declaring your controllers on the routes definition, of course:

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
        when('/', {
            templateUrl: 'app/views/view1.html',
            controller: 'Controller1',
            controllerAs: 'vm'
        }).
        otherwise({
            redirectTo: '/'
        });
  }]);

Finally, the html of our view will be something like this:

<input type="text" data-ng-model="vm.firstName" />
<input type="text" data-ng-model="vm.lastName"/>
<br/>
<div>
    {{vm.newVal}}
</div>
<div>
    {{vm.oldVal}}
</div>

I.H.I.H (I Hope It Helps!)

Collectives™ on Stack Overflow

angularjs $watchGroup with controller as syntax

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related