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: '[email protected]'} ];
}
//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

why you want to add $watch?

Ajay
– Ajay

2016-07-06 13:14:32 +00:00
Commented Jul 6, 2016 at 13:14 — Ajay
– Ajay, Commented Jul 6, 2016 at 13:14

Community · Accepted Answer · 2017-05-23 11:52:35Z

1

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: '[email protected]'} ];

  $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

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Jul 6, 2016 at 10:36

Ivan Sivak

7,5484 gold badges39 silver badges43 bronze badges

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

Comments

Martin · Accepted Answer · 2016-07-06 10:27:37Z

0

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: '[email protected]'} ];
}

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>

answered Jul 6, 2016 at 10:27

Martin

16.4k4 gold badges51 silver badges58 bronze badges

2 Comments

htoniv Over a year ago

i want $watch for the input field. it is need for some purpose.

Martin Over a year ago

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.

Collectives™ on Stack Overflow

AngularJS. Adding $watch to the particular model

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related