AngularJS. Adding $watch to the particular model

Question

I am new to angularJS and i don't know how to add $watch to the particular model. When going through the angularjs tutorial I am facing some issue. I mentioned my doubt in comments part. please go through this.

(function(angular) {
angular.module('controllerAsExample', [])
  .controller('SettingsController1', SettingsController1);

function SettingsController1() {
  this.name = "John Smith";
  this.contacts = [
    {type: 'phone', value: '408 555 1212'},
    {type: 'email', value: 'john.smith@example.org'} ];
}
//how to add $watch to ng-model 'settings.name' 
/*$scope.$watch("settings.name", function(oldval, newval){
  console.log(oldval + "  + " + newval);
});*/

SettingsController1.prototype.greet = function() {
  console.log(this.name);
};


})(window.angular);

HTML code..

<body ng-app="controllerAsExample">
  <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
    <label>Name: <input type="text" ng-model="settings.name"/></label>
    <button ng-click="settings.greet()">greet</button><br/>
  </div>
</body>

Here check my link

score 1 · Answer 1 · edited May 23 '17 at 11:52

Basically, you need to inject the $scope context. As stated in this SO answer.

function SettingsController1($scope) {
  this.name = "John Smith";
  this.contacts = [
    {type: 'phone', value: '408 555 1212'},
    {type: 'email', value: 'john.smith@example.org'} ];

  $scope.$watch(angular.bind(this, function () {
    return this.name;
  }), function (newVal, oldVal) {
    console.log('Name changed to ' + newVal + ', old value = ' + oldVal);
  });
}

Notice the $scope being passed to the function controller and then angular.bind(this which tells the watcher right context.

Working example: http://plnkr.co/edit/HR0DTphdBsF2xXUfmwfT?p=preview

score 0 · Answer 2 · answered Jul 06 '16 at 10:27

Unless there is some other functionality in your code you are not demonstrating, you do not need a $watch().

$watch() is one of the most abused functions of angularJS. Many developers new to AngularJS will add unnecessary $watch() expressions that complicate code.

Controllers with $watch() is typically a bad code smell. There are definitely places where you should use $watch -- but from your example this is not one of them.

Instead you can just do the following.

(function(angular) {
angular.module('controllerAsExample', [])
  .controller('SettingsController1', SettingsController1);

function SettingsController1() {
  this.name = "John Smith";
  this.contacts = [
    {type: 'phone', value: '408 555 1212'},
    {type: 'email', value: 'john.smith@example.org'} ];
}

SettingsController1.prototype.greet = function() {
  console.log(this.name);
};

})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="controllerAsExample">
  <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
    <label>Name: <input type="text" ng-model="settings.name"/></label>
    <button ng-click="settings.greet()">greet</button><br/>
  </div>
</div>

i want `$watch` for the input field. it is need for some purpose. — htoniv, Jul 06 '16 at 10:29
Can you update your original question and expound on why you want to use $watch. Please explain the `what` and `why` you are trying to do. This will help with getting a quality answer. — Martin, Jul 06 '16 at 10:34

AngularJS. Adding $watch to the particular model

2 Answers2