CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
Jaap
Jaap

Reputation: 308

$scope.$watch not raising events inside a ui.bootstrap.modal controller

I am using UI bootstrap for Angular, and I have integrated the ui.bootstrap.modal component into my solution. Everything is working fine except for one thing. I have setup a $scope.$watch to monitor changes on a specific property on the controller that sits behind the modal, however, it is not firing when the property changes.

I have reproduced it in the plunkr

As you can see it fires once when the modal opens, but not when you change the checkbox value in the UI. The binding appears fine at first sight, since updating one checkbox updates the other (both are bound to the same property).

Any ideas?

Thanks!

Upvotes: 2

Views: 1554

Answers (1)

Matt Pileggi
Matt Pileggi

Reputation: 7196

Angular $watch statements are always fired at least once to setup the binding

After a watcher is registered with the scope, the listener fn is called asynchronously (via $evalAsync) to initialize the watcher. In rare cases, this is undesirable because the listener is called when the result of watchExpression didn't change. To detect this scenario within the listener fn, you can compare the newVal and oldVal. If these two values are identical (===) then the listener was called due to initialization.

You are getting an alert on the setup, but it doesn't appear to be binding anything which is why you aren't seeing it called again.

What you are seeing is an Angular limitation due to prototypal inheritance and primitives. If you change it to $scope.form = {}; and reference it as form.chkVariable it should work as expected.

http://plnkr.co/edit/3hCJ3EM1Gx1fCDSePQfa?p=preview

Upvotes: 7

Related Questions