javascript

  • It’s about the same overhead as providing a function for the combined value, without actually having to worry about the value composition .
  • $watch first parameter can be angular expression or function.
  • You can use functions in $watchGroup to select fields of an object in scope.
  • Function will get called when both age and name value get changed.
  • If your two combined values are simple, the first parameter is just an angular expression normally.


Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).


@JavascriptQnA: Watch multiple $scope attributes #javascript #angularjs #events #angularjs-watch

Plunker example here

Documentation here

Note that the first parameter is not an array. It’s a string that looks like an array. – M.K. Safi Sep 22 ’13 at 16:33

thanks for this. if it works for me, I will give you a thousand gold coins – virtual ones, of course 🙂 – AdityaSaxena Aug 20 ’14 at 13:47

is intended to be handed an array of individual properties to watch for changes to. Slightly different to tackle similar yet different problems. Phew! – Mattygabe Feb 28 ’15 at 1:26

Somehow, newValues and oldValues are always equal when you use this method: plnkr.co/edit/SwwdpQcNf78pQ80hhXMr – mostruash May 4 at 9:45

first parameter can also be a function.

If your two combined values are simple, the first parameter is just an angular expression normally. For example, firstName and lastName:

This seems like a use-case that’s crying out for inclusion in the framework by default. Even a computed property as simple as

). Angular is SO powerful, but there are some areas where it can be enormously more developer-friendly in ways that don’t (seem to) compromise performance or design principles. – XMLilley Aug 24 ’12 at 21:27

Well $watch just takes an angular expression, which is evaluated on the scope it’s called on. So you could do

. I added the simple case to the answer. – Andrew Joslin Aug 24 ’12 at 22:17

The plus in ‘firstName + lastName’ is string concatenation. So angular just checks whether the result of the concatenation is different now. – mb21 Sep 5 ’12 at 22:11

String concatenation requires a little care – if you change “paran orman” to “para norman” than you won’t trigger a response; best to put a divider like “\t|\t” between the first and second term, or just stick to JSON which is definitive – Dave Edelhart Oct 7 ’12 at 19:05

although amberjs sucks, but it has this feature build in! hear that angular guys. I guess doing to watches is the most rational doable way. – Aladdin Mhemed Oct 24 ’12 at 6:43

Here’s a solution very similar to your original pseudo-code that actually works:

EDIT: Okay, I think this is even better:

Basically we’re skipping the json step, which seemed dumb to begin with, but it wasn’t working without it. They key is the often omitted 3rd parameter which turns on object equality as opposed to reference equality. Then the comparisons between our created array objects actually work right.

I had a similar question. And this is the correct answer for me. – Calvin Cheng May 31 ’13 at 3:47

Both have a slight performance overhead if the items in the array expression aren’t simple types. – null Aug 18 ’13 at 10:10

That is true.. it’s doing a full depth comparison of the component objects. Which may or may not be what you want. See the currently approved answer for a version using modern angular that doesn’t do a full depth comparison. – Karen Zilles Aug 26 ’13 at 20:48

but this solution helps me to solve my problem ! – abottoni Sep 10 ’13 at 8:05

Cool, you can even watch values within objects:

– Serge van den Oever Jan 28 ’14 at 10:30

It’s about the same overhead as providing a function for the combined value, without actually having to worry about the value composition.

In this case log() would be executed several times, right? I think in case of nested $watch functions it wouldn’t. And it should not in the solution for watching several attributes at once. – John Doe May 13 ’13 at 6:58

No, log is only executed once per change per watched property. Why would it be invoked multiple times? – Erik Aigner May 13 ’13 at 14:18

Right, I mean it wouldn’t work nice if we want to watch all of them simultaneously. – John Doe May 13 ’13 at 14:24

is invoked whenever something changes in either of the properties. That’s the exact same behavior as if a function for the combined value was provided. – Erik Aigner May 13 ’13 at 14:35

It’s slightly different in that if multiple of the items in the array change at the same time the $watch will only fire the handler once instead of once per item changed. – bingles Oct 29 ’14 at 16:48

function:

or

You can use functions in $watchGroup to select fields of an object in scope.

? Doesn’t the scope get carried down into the functions without explicitly defining it? – sg.cc May 21 ’15 at 20:34

I use typescript, the presented code is compiled result. – Yang Zhang May 21 ’15 at 23:04

$watch first parameter can be angular expression or function. See documentation on $scope.$watch. It contains a lot of useful info about how $watch method works: when watchExpression is called, how angular compares results, etc.

how about:

would fire every single time, because the anonymous hash has a different reference every time. – Peter V. Mørch Jan 27 ’14 at 3:42

. I then check the returned objects of the new and old values against each other. – RevNoah Mar 18 ’14 at 1:53

Here function will get called when both age and name value get changed.

Also be sure in this case not use the newValue and oldValue arguments that angular passes into the callback because they will be the resulting concatenation and not just the field that was changed – Akash Shinde Apr 16 ’15 at 19:21

javascript

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.