AngularJS: How to call jQuery function

Question

I'm developing an AngularJS web application. I need to call a jQuery function (doing some changes to my markup), but it seems that using AngularJS break jQuery functionallity. Here is a small sample:

$(document).ready(function () {
    $('h1').click(function () {
        alert("Title was clicked.");
    });
});

See my JSFiddle.

If I only use jQuery this works fine, but if I run it with the AngularJS framework it does not work.

Why?

EDIT1 (Off-topic)

I'm using the AngularJS Bootstrap Popover with a click trigger on an icon. Here is the HTML markup when the icon is not clicked:

<i class="fa fa-circle" popover="My popover text" popover-trigger="click"></i>

When the icon is cliked and the popover is shown, the popover markup is appended to the icon:

<i class="fa fa-circle" popover="My popover text" popover-trigger="click"></i>  
<div class="popover right fade in" ...>
    <div class="arrow"></div>
    <div class="popover-inner">
        <h3 class="popover-title ng-binding ng-hide" ng-bind="title" ng-show="title"></h3>
        <div class="popover-content ng-binding" bind-html-unsafe="content">My popover text</div>
    </div>
</div>

I would like to add a hover CSS class to the i element, when the popover is active.

Can this be accomplish using AngularJS?

I need to watch some DOM changes and apply classes to some divs, which is not possible using CSS3. — dhrm, Apr 27 '15 at 08:14
@dhrm try it now, it has both angular and jquery included http://jsfiddle.net/ph6srf5g/1/ — Paul Fitzgerald, Apr 27 '15 at 08:16
if you haven't taken a minute to read this https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq=1 I would grab a brew and have a read. — Steve Drake, Apr 27 '15 at 08:29

score 2 · Accepted Answer · edited May 23 '17 at 12:01

In your fiddle you only have Angular as the external library, Angular doesn't contain jQuery by itself and therefore your code should not work. Once I added jQuery the code worked fine, I often have angular and jQuery in my together in my work.

However, your approach to using jQuery to manipulate your DOM is not an angular way of working.

<div ng-app='main' ng-controller='mainCntrl'>
    <h1 ng-click='click()'>Title</h1>
</div>
<script>
    app = angular.module('main', [])
    app.controller('mainCntrl', function ($scope) {
        $scope.click = function(){
            alert("Title was clicked")
        }
    })
</script>

(I'm aware that there is slightly less verbose way of writing this but I hope this makes what is going on clearer)

jsFiddle: http://jsfiddle.net/ph6srf5g/3/

This is a great thread for understanding the differences in thinking between angular and jQuery: "Thinking in AngularJS" if I have a jQuery background?

I would really suggest that you ditch jQuery and only use Angular. Personally, I restrict myself to only using jQuery inside directives.

If you have something more complex that you are trying to achieve, then maybe you could post that up and we can see if its something we can help build in angular?

Please see my *EDIT1*. I've described what I'm trying to achieve. — dhrm, Apr 27 '15 at 09:22

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Additional Edited Answer:

I would personally use this directive:

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.toggleClass(attrs.toggleClass);
            });
        }
    };
});

With the following html:

<p toggle-class="isActive" popover="My popover text" popover-trigger="click">icon</p>
<style>.isActive {background:green}</style>

The directive handles all of the javascript and means that the controller just needs to handle the behavior of the web app and keeps your html super clean.

I find directives intimidating so I usually just end up copy/pasting pre-built directives I find on the web.

score 0 · Answer 3 · answered Apr 27 '15 at 08:19

Just change the html in your fiddle to:

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<h1>Title</h1>

Note that angular is loaded last as it should not break functionality.

AngularJS: How to call jQuery function

3 Answers3

Additional Edited Answer: