javascript - Use `this.$watch` instead of `$scope.$watch` with 'Controller As' - Stack Overflow

admin管理员组

文章数量:1188036

Currently I am using the Controller As format for scoping controllers.

This works great for keeping the scope of values on the views clear and easy to follow.

<div ng-app="myApp" ng-controller="myController as myctrl">
    <ul>
        <li ng-repeat="contact in myctrl.contacts">
            <input type="text" ng-model="contact.name.first" />
        </li>
    </ul>
</div>

However, when implementing a $watch I am running into problems because it seems to be dependent on $scope so the following will not work.

angular.module('myApp',[])
.controller('myController',['contacts',function(contacts) {
    this.contacts = contacts;

    this.$watch('contacts', function(newValue, oldValue) {
       console.log({older: oldValue, newer:newValue});
    });

}]);

I get undefined is not a function in reference to this not having a method $watch.

Is there a way to $watch a value with the Controller As format?

JS Fiddle

Currently I am using the Controller As format for scoping controllers.

This works great for keeping the scope of values on the views clear and easy to follow.

<div ng-app="myApp" ng-controller="myController as myctrl">
    <ul>
        <li ng-repeat="contact in myctrl.contacts">
            <input type="text" ng-model="contact.name.first" />
        </li>
    </ul>
</div>

However, when implementing a $watch I am running into problems because it seems to be dependent on $scope so the following will not work.

angular.module('myApp',[])
.controller('myController',['contacts',function(contacts) {
    this.contacts = contacts;

    this.$watch('contacts', function(newValue, oldValue) {
       console.log({older: oldValue, newer:newValue});
    });

}]);

I get undefined is not a function in reference to this not having a method $watch.

Is there a way to $watch a value with the Controller As format?

JS Fiddle

• javascript
• angularjs
• angularjs-scope

Share Improve this question Follow edited Sep 9, 2014 at 15:13 Malkus asked Sep 9, 2014 at 15:06 MalkusMalkus 3,72622 gold badges2626 silver badges3939 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 21

Even with the controllerAs format, the $scope is there.

In fact what controllerAs does is bind the controller instance's this to the $scope.
E.g. controller="myController as myctrl" does (behind the scenes): $scope.myctrl = this (where this refers to the myController instance).

So, you can just inject and use the $scope for watches:

.controller('myController', function ($scope, contacts) {
    this.contacts = contacts;

    $scope.$watch(function () {
        return contacts;
    }, function (newValue, oldValue) {...});
});

$scope.$watch("contact", callback, true) // true makes it a deep/recursive watch

Try this,

 $scope.$watch(angular.bind(this, function () {
            return this.contacts;
        }), function (newValue, oldValue) {
            console.log((newValue + '  -  ' + oldValue));
        });

Others written clearly about why $scope is generally still required. But not how to actually watch your variables in the case of your example to properly watch the local variable "contacts" you must identify it by the controller namespace.

So:

$scope.$watch('myctrl.contacts', function(newValue, oldValue) {
       console.log({older: oldValue, newer:newValue});
    });

The idea of using the local namespace is to prevent mutation if you create child controllers inside another controller. The nice benefit of this is that a parent controller can watch all the spaces inside its scope.

Lets say that the initial html looked something like:

<div ng-app="myApp" ng-controller="myController as myctrl">
  <div ng-controller="listController as mylist">
    <ul>
        <li ng-repeat="contact in myctrl.contacts">
            <input type="text" ng-model="contact.name.first" />
        </li>
    </ul>
  </div>
</div>

and the js:

angular.module('myApp',[])
.controller('myController',['$scope',function(contacts) {

    $scope.$watch('mylist.contacts', function(newValue, oldValue) {
       console.log({older: oldValue, newer:newValue});
    })
.controller('listController',['contacts',function(contacts) {
    this.contacts = contacts;
    });
}]);

Now the main controller is watching activity in a nested controller... pretty nifty.

本文标签： javascriptUse thiswatch instead of scopewatch with 39Controller As39Stack Overflow