javascript - Angular, watch $scope for changes - Stack Overflow

admin管理员组

文章数量:1026989

I am trying to watch a scope so I can have a function re run each time, and it does not seem to be working how I immagined it would.

so I just have

 $scope.user = userFactory.getUser();

My user being pulled in from a factory

And then later in a click function I change it to something else by having the user click a button like so

 $scope.swapUserTest = function(){
  $scope.user = {'name' : 'new'}
}

And then I'm trying to just watch if it changes - which right not is just in the click, in the future it will be from multiple differnt things so I would like a watch over it so whenever it changes my function fires. Something like this :

$scope.$watch($scope.user, function() {
  console.log("changed")
});

So I was assuming, whenever $scope.user changed this would fire, but it seems to only be firing when it first enters the controller form the factory. Could use some guidance here. Thank you!

I am trying to watch a scope so I can have a function re run each time, and it does not seem to be working how I immagined it would.

so I just have

 $scope.user = userFactory.getUser();

My user being pulled in from a factory

And then later in a click function I change it to something else by having the user click a button like so

 $scope.swapUserTest = function(){
  $scope.user = {'name' : 'new'}
}

And then I'm trying to just watch if it changes - which right not is just in the click, in the future it will be from multiple differnt things so I would like a watch over it so whenever it changes my function fires. Something like this :

$scope.$watch($scope.user, function() {
  console.log("changed")
});

So I was assuming, whenever $scope.user changed this would fire, but it seems to only be firing when it first enters the controller form the factory. Could use some guidance here. Thank you!

• javascript
• angularjs

Share Improve this question Follow asked Jan 29, 2015 at 0:43 ajmajmajmaajmajmajma 14.2k2525 gold badges8383 silver badges138138 bronze badges 1

• 3 $scope.$watch('user', function() { – dave Commented Jan 29, 2015 at 0:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can either specify the property of an object:

$scope.$watch('user', function(newValue, oldValue) {
    // do something
});

or you can specify a function that returns the value you're watching:

$scope.$watch(function () {
    return $scope.user;
}, function(newValue, oldValue) {
    // do something
});

To watch a property of a scope, set it as the first parameter for the $watch function. Note: when you watch an object, then your watch gets called only when the entire object changes, not when a property of that object changes. E.g:

$scope.user = {"username": "john", "email": "[email protected]"};
$scope.$watch("user", function(user) {
    console.log("users email now is:", user.email);
});

$timeout(function() {
    $scope.user = {"username": "jack", "email": "[email protected]"};
}, 1000);

$timeout(function() {
    $scope.user.email = "[email protected]";
}, 2000);

//  after one second console outputs
// [email protected]
//after 2 seconds ... nothing, even though user object's email has changed.

To "deep watch" an object, set the third parameter of your $watch to be true. $watch("property_name", callback_function, true);

Or when you want to watch a specific property of an object, use

$scope.$watch("user.email", function(email) {
    console.log("user.email watch called with:", email);
});
/* 
outputs both 
user.email watch called with: [email protected]
users.js:60 user.email watch called with: [email protected]
*/

I am trying to watch a scope so I can have a function re run each time, and it does not seem to be working how I immagined it would.

so I just have

 $scope.user = userFactory.getUser();

My user being pulled in from a factory

And then later in a click function I change it to something else by having the user click a button like so

 $scope.swapUserTest = function(){
  $scope.user = {'name' : 'new'}
}

And then I'm trying to just watch if it changes - which right not is just in the click, in the future it will be from multiple differnt things so I would like a watch over it so whenever it changes my function fires. Something like this :

$scope.$watch($scope.user, function() {
  console.log("changed")
});

So I was assuming, whenever $scope.user changed this would fire, but it seems to only be firing when it first enters the controller form the factory. Could use some guidance here. Thank you!

I am trying to watch a scope so I can have a function re run each time, and it does not seem to be working how I immagined it would.

so I just have

 $scope.user = userFactory.getUser();

My user being pulled in from a factory

And then later in a click function I change it to something else by having the user click a button like so

 $scope.swapUserTest = function(){
  $scope.user = {'name' : 'new'}
}

And then I'm trying to just watch if it changes - which right not is just in the click, in the future it will be from multiple differnt things so I would like a watch over it so whenever it changes my function fires. Something like this :

$scope.$watch($scope.user, function() {
  console.log("changed")
});

So I was assuming, whenever $scope.user changed this would fire, but it seems to only be firing when it first enters the controller form the factory. Could use some guidance here. Thank you!

• javascript
• angularjs

Share Improve this question Follow asked Jan 29, 2015 at 0:43 ajmajmajmaajmajmajma 14.2k2525 gold badges8383 silver badges138138 bronze badges 1

• 3 $scope.$watch('user', function() { – dave Commented Jan 29, 2015 at 0:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can either specify the property of an object:

$scope.$watch('user', function(newValue, oldValue) {
    // do something
});

or you can specify a function that returns the value you're watching:

$scope.$watch(function () {
    return $scope.user;
}, function(newValue, oldValue) {
    // do something
});

To watch a property of a scope, set it as the first parameter for the $watch function. Note: when you watch an object, then your watch gets called only when the entire object changes, not when a property of that object changes. E.g:

$scope.user = {"username": "john", "email": "[email protected]"};
$scope.$watch("user", function(user) {
    console.log("users email now is:", user.email);
});

$timeout(function() {
    $scope.user = {"username": "jack", "email": "[email protected]"};
}, 1000);

$timeout(function() {
    $scope.user.email = "[email protected]";
}, 2000);

//  after one second console outputs
// [email protected]
//after 2 seconds ... nothing, even though user object's email has changed.

To "deep watch" an object, set the third parameter of your $watch to be true. $watch("property_name", callback_function, true);

Or when you want to watch a specific property of an object, use

$scope.$watch("user.email", function(email) {
    console.log("user.email watch called with:", email);
});
/* 
outputs both 
user.email watch called with: [email protected]
users.js:60 user.email watch called with: [email protected]
*/

本文标签： javascriptAngularwatch scope for changesStack Overflow