Angular Watch and ng-click sequence of events

Question

I have this code inside an angular directive, and I'm finding the $watch behavior a bit confusing. The updateSelect is called in an "ng-click":

scope.updateSelect = function (type) {
    scope.selectionCtrl.activeList = scope.seedLists[type]; 
    scope.selectionCtrl.activeListKey = type; 
    scope.selectionCtrl.activeSelection = scope.selection[type];
    scope.selectionCtrl.staged = [];
    scope.selectionCtrl.stageRemove = [];
    if (type !== scope.activeTab) {
        scope.activeTab = type;
    }
    console.log("update");
};

scope.$watch('selectionCtrl.activeList', function(newValue, oldValue) {
    console.log("watch");
}, true);

When I click on the button (triggering updateSelect), and watch the console, I see "update" and then "watch". The first thing that happens inside the function is selectionCtrl.activeList is set, so I would expect to see "watch" and then "update".

Shouldn't watch trigger as soon as the array has changed?

The function has to finish first as javascript is single threaded — Gruff Bunny
– Gruff Bunny, Commented Nov 14, 2014 at 18:35
I see, so if selectionCtrl.activeList is binded to an ng-repeat, then the ng-repeat won't actually update until the end of updateSelect, is that right? — Doug Molineux
– Doug Molineux, Commented Nov 14, 2014 at 18:38

Gruff Bunny · Accepted Answer · 2014-11-14 22:07:51Z

2

The function has to finish first as javascript is single threaded.

Because the function was called via the ng-click directive, angular will run a digest cycle. Part of that digest cycle is to run through the watch list and resolve all the changes that may have occurred since the cycle last ran.

In the example you give, selectionCtrl.activeList is changed in updateSelect which subsequently results in the watch callback being called.

answered Nov 14, 2014 at 22:07

Gruff Bunny

28k10 gold badges74 silver badges61 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:16:43Z

1

When does Angular execute watch callback?

It's related to $digest and $apply, and certainly it does not execute within your raw javascript code.

To make watch execute forcefully, you can run $scope.apply() manually, but may cause more problem and not necessary if it is within a angularjs function, i.e. $timeout, $interval, etc, because it will be called automatically after the function.

For more info., lookup;

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Nov 14, 2014 at 23:05

allenhwkim

27.8k18 gold badges93 silver badges128 bronze badges

Comments

Petr Averyanov · Accepted Answer · 2014-11-14 18:45:10Z

-1

https://docs.angularjs.org/api/ng/type/$rootScope.Scope :

The watchExpression is called on every call to $digest() and should return the value that will be watched. (Since $digest() reruns when it detects changes the watchExpression can execute multiple times per $digest() and should be idempotent.)

If you try i.e.:

scope.selectionCtrl.activeList = scope.seedLists[type]; 
scope.$digest();

you'll get Error: [$rootScope:inprog] $apply already in progress.

answered Nov 14, 2014 at 18:45

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Collectives™ on Stack Overflow

Angular Watch and ng-click sequence of events

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related