CODEWITHSUNDEEP
jqueryangularjs
dhrm
dhrm

Reputation: 14934

AngularJS: How to call jQuery function

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?

Upvotes: 1

Views: 3583

Answers (3)

TobyGWilliams
TobyGWilliams

Reputation: 631

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.

Upvotes: 1

TobyGWilliams
TobyGWilliams

Reputation: 631

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?

Upvotes: 2

Virendra Shenvi Velingkar
Virendra Shenvi Velingkar

Reputation: 166

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.

Upvotes: 0

Related Questions