AngularJS: How to call the jQuery function

advertisements

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?


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?