Issue
I am fairly experience with Angular by now, but this appears to be something happening at a lower level with the way DOM events are propagated. For some reason in just part of my application I have ng-focus
and ng-blur
on the same input
, but the ng-focus
event fires twice and the ng-blur
never fires.
<input type="text" ng-focus="doFocus()" ng-blur="doBlur()" />
Then in my controller
$scope.doFocus = function(){
console.log('focus');
}
$scope.doBlur = function(){
console.log('blur');
}
When I inspect my console, I see 2 "focus" and no "blur" messages... I have tested this in other parts of my website and it works in some others. My guess is it has something to do with the DOM, but I have even tried pulling out basically everything on the page except the input
and it still didn't work correctly. Does anyone have any idea what could cause this?
UPDATE
After some more debugging, I noticed that the focus event is fired once in the scope of the browser, but the event triggers twice in the world of AngularJS. I set a breakpoint on all Focus events using Chrome Dev Tools and it only would hit once, but if I log the Angular $event
in the console, I can see the EXACT same $event with the same timestamp being triggered twice in Angular.
Solution
Ok.. so this is kind of a strange one. After not finding a solution myself, I had a coworker try to reproduce my problem on his machine. Of course, it worked just fine for him.. this made me think it was my Chrome, so I uninstalled and re-installed a fresh instance of Chrome and now it everything is just fine... not sure what happened to my Chrome that caused the DOM events to get all kinds of messed up, but at least I figured it out.
Hopefully this helps anyone that may have this problem in the future.
UPDATE
I realized the problem was the Chrome Extension: AngularJS Batarang
This plugin was messing with my DOM events and caused them to not fire correctly. I removed the extension from Chrome and everything started working!
Answered By - Matt Hintzke
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.