Angularjs Bootstrap UI tooltip scope preventing watch from firing

Question

I'm having an issue with a $watch that is really just boggling my brain. I'm almost certain that it is somehow a scope issue. Here's the basics. I'd like a tooltip on a span surrounding a checkbox and it's label so that the tooltip activates on hover over the checkbox or label. something like this. (note:I've added the {{values.isChecked}} just to watch the values in the two different scopes)

HTML

 {{values.isChecked}}
<span tooltip-placement="right" tooltip="This is my tooltip">
    <input type="checkbox" id="myCheckbox" ng-model="values.isChecked">
    <label for="myCheckbox"> My Checkbox</label> {{values.isChecked}}
</span>

from angular controller

$scope.values.isChecked = true;
$scope.watch("values.isChecked",function(newValue,oldValue){
    alert("Made it to the watch");
}

The most odd behavior is that my watch catches the transition of the value from true to false. But does not catch the transition from false to true. I can click it several times and it will make it to the watch going from true to false, but not false to true. If it catches the true to false, and then catches true to false again, well, it HAD to have changed from false to true in order to trigger the watch again. I know the value is actually changing, the two places wehre I added it to the page via {{values.isChecked}}, both show the values change as expected, it's just not firing my watch when I CHECK the box. only when I UNCHECK it.

All my code is on a different box on an isolated network, so I can't actually copy and paste any, so tried to just type in the relevant stuff. Also if I just take out the Span that has the tooltip on it, it works just fine. I'm aware that bootstrap UI's tooltip does create a new scope. so suspect that, but don't know why it works for one transition, but not the other.

I have even gone as far as capturing the scope inside the tooltip and adding my watch there such as...

myChildScope = angular.element('#myCheckBox').scope()
myChildScope.$watch("values.isChecked",function(newValue,oldValue){
...

It behaves incorrectly, the exact same way. Also behaves the exact same (bad) way if I try to add an ng-click or ng-change to the checkbox element.

Sorry, it's not formatting my code correctly, and I'm a novice on SO. working to fix it. — Joe
– Joe, Commented Jul 15, 2014 at 21:02
When you do a code block with the spaces in front, you need a blank line separating it from the text above it. — dave
– dave, Commented Jul 15, 2014 at 21:22
Still not really sure what's going on. But it does seem to be working. The alert line in the watch above was actually a debugger line in my code. I noticed that when I was at a breakpoint in the watch, it would throw a "digest already in progress" error. And would always fail to trigger my watch after that. I just added a counter to the watch so I'd see when it got into the watch, and it seems to be hitting it every time now. I guess I have some things to learn about digest and what things continue to happen while you are waiting on a breakpoint. — Joe
– Joe, Commented Jul 15, 2014 at 22:27
The answer for this thread did work for me: [stackoverflow.com/questions/21717555/… [1]: stackoverflow.com/questions/21717555/… — huan feng
– huan feng, Commented Sep 5, 2014 at 8:51

dave · Accepted Answer · 2014-07-15 21:21:34Z

1

Two things to try, I'm not sure how your code is setup but for issues of a watch not catching things when you think it should, generally one of these will work.

$scope.watch("values.isChecked",function(newValue,oldValue){
                                              alert("Made it to the watch");
                                          }, true);

The true tells it to compare for object equality using angular.equals instead of comparing for reference equality. Since it's a boolean primitive... probably more of what you want to use.

The other option, which may or may not help in your case, it to use

$scope.watchCollection("values",function(newValue,oldValue){
                                              alert("Made it to the watch");
                                          });

And see if anything in the values object changes.

Also, you could change isChecked to an object,

$scope.isChecked = { checked: false }

and $watch the object rather than the boolean itself.

answered Jul 15, 2014 at 21:21

dave

65.1k6 gold badges81 silver badges98 bronze badges

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

1 Comment

Joe Over a year ago

As mentioned in my comment above, I think this was something to do with the digest happening while I was ON my breakpoint in the debugger, which is odd behavior to me, but oh well. Marking this as answer anyway because it's still good information pertaining to the issue.

Collectives™ on Stack Overflow

Angularjs Bootstrap UI tooltip scope preventing watch from firing

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related