AngularJs and JQuery hover not working

Question

I have the following JQuery code which I am trying to run inside one of my AngularJS application views but for some reason I can't track it is not working. Same exact code is working in any HTML page without the AngularJS app, so I was wondering if there is a conflict or problem in using this JQuery feature in an AngularJS app? and if not how I can make it work? Any example is highly appreciated.

jQuery(document).ready(function($){
  $('.clientblock').hover(function() {
    $(this).closest('.budget').find('.budgettooltip').stop(true,true).fadeToggle('fast');
  });
});

Thanks

You should never have jQuery in a controller. At the very least, what you have should be made into a directive. — MBielski, Apr 17 '14 at 13:52
jQuery document ready doesn't works well with angular. Use a directive instead. — Beterraba, Apr 17 '14 at 13:54
@MBielski is it possible you please show me an example of how to implement this as a directive? Thanks — MChan, Apr 17 '14 at 14:26
Look a little bit to the right. See the answer with a score of 2392 (and still growing, so awesome is it!) ====>. Look especially at chapter 5. Heres the link if you don't find it:http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?rq=1 — mainguy, Apr 17 '14 at 15:17

Theo · Accepted Answer · 2014-04-17T16:17:15.643

When you use jQuery events you need to 'tell' AngularJS about it.

You can do this by wrapping the code in $scope.$apply(fn)

jQuery(document).ready(function($){
  $('.clientblock').hover(function() {
    $scope.$apply(function() {
       $(this).closest('.budget').find('.budgettooltip').stop(true,true).fadeToggle('fast');
    });
  });
});

Hopefully that should resolve your problem, but it depends on what you mean by 'Not working'?

To use as a directive:

.directive('budgetTooltip',
    function(){
        return {
            restrict: 'A',
            link: function ($scope, $element) {
                $element.hover(function() {
                    $(this).closest('.budget').find('.budgettooltip').stop(true,true).fadeToggle('fast');
                });
            }
        };
    });

Note that it no longer needs the $scope.$apply and that is because we are not using jQuery's 'hover' but AngularJS's 'hover' function that does the $scope.$apply for us.

You will find AngularJS a lot easier if you start adopting it all the time, instead of using jQuery. AngularJS provides most of the common jQuery functionality so use that when you can.

To use the directive add budget-tooltip to the element you want it to apply to.

Sorry for not clarifying, what I meant by not working is that the tool tip is not shown on mouse hover. Thanks for the clarification, I will try it now. One question though, is it possible to implement this as a directive? — MChan, Apr 17 '14 at 14:26
Have edited my answer with details on how to make it a directive — Theo, Apr 17 '14 at 16:17

AngularJs and JQuery hover not working

1 Answers1