Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Using the AngularJS scope's $watchCollection method

    Ben ClinkinbeardBen Clinkinbeard

    The $watchCollection method on Angular scopes provides a convenient way to watch for changes on the shallow properties of an object.

    angularjsAngularJS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 So we've now seen how to watch a simple value like user.password, which in this case, is just going to be a string. If we start typing here, we can see we get an incremental version of that value. If you want to watch something like an object, it's a little bit different.

    00:24 If we change this to the user object, instead of this and then rerun it, you can see initially we have undefined for both the new value and the old value. Then as we type the first letter, we get this new object who has a password property of E and then undefined was our old value.

    00:42 If we then type another letter, we don't actually get notified of any of these new changes and that's because by default scope.watch does reference a quality. It makes sure that it's a new object.

    00:56 In this case, we're not getting new object each time, we're just modifying the password property. One way you can get around this is to use that third property that we talked about before, which is the object equality property. Just to show that this works, we now get notified the first time, but we also get notified on subsequent entries.

    01:22 The way that this is doing this is this true argument tells it don't look for a reference equality just make sure that the objects are loosely equivalent. Essentially what this is doing behind the scenes is it's serializing these objects and copying them and doing a comparison of those.

    01:44 When it compares, for instance this time, it has made a copy of the object whose password property was E, compared it to this one, whose property is EG and that's different, so we get notified. Because it's serializing and copying that object, this is going to be pretty expensive in terms of the load that it puts on the parser and the framework.

    02:11 A better way to do this, if you want to watch an object, is to get rid of this and use the watch collection method. What this is actually going to do is it's going to watch all of the shallow properties on this object for us. It's going to look at user. It's going to look at all the property in user.

    02:36 What we can now do is going over here and type and you can see that we do, again, get notified of all these changes. In this case, it's not requiring angular to make copies of those objects.

    02:47 Watch collection can also be used for watching arrays, but it's actually not really necessary or arrays because a regular watch will work to compare arrays. I believe what it's doing behind the scenes is just doing a two string, so array is actually will show up as different when parsed to a string, whereas objects won't.

    Discuss

    Discuss