Using Jquery inside AngularJS directive good or bad idea?

Question

Below you can see my code for the directive.

My question is: " Can i use jquery with directives? Is that a good idea? If not why? "

outsource.directive('dedicated', function(){

        return {
           restrict: 'E',
           link: function(scope, element, attribute){

                 $("#klik").click(function(){
                    alert('works');
                 });

           },

           replace: true,
           templateUrl: 'src/app/components/views/dedicated-prices.html'
        };
    });

P.s this code works.

Solution 1

You should not be using jquery as Angular itself has a lighter version for it known as jqlite.

More documentation on JQLITE

So your directive should look like:

outsource.directive('dedicated', function(){

    return {
       restrict: 'E',
       link: function(scope, element, attribute){

             var elem = angular.element(document.querySelector('#klik'))
             angular.element(elem).triggerHandler('click');

       },

       replace: true,
       templateUrl: 'src/app/components/views/dedicated-prices.html'
    };
});

Solution 2

Simple Answer: YES (Simply refer jquery.js above Angular.js in HTML page. jqLite will be replaced by jQuery)

You would be using jQuery for DOM manipulation & there are many discussions going on this topic (whether to use or not in modern browsers).

One of the popular posts in the recentdays: http://lea.verou.me/2015/04/jquery-considered-harmful/

Despite everything, jQuery is still a very popular, highly used DOM library. And, it works with many modern UI frameworks seamlessly.

Solution 3

Interesting question. I've got some jquery with element selection in some directives/controllers in my codebase.

I always feel dirty using it and only do it when I really need to, unfortunately it's almost always a time bomb and leads to me cursing myself a few months down the line and refactoring to use a more angulary method.

Have one last look to see if there's a native angular way of doing what you're trying to do, you won't regret it!

Comments

[Jovan Perovic]

It only depends on how much you'd like to "get away" from jQuery. I've seen on many SO topics that people are more like to choose to use AngularJS or jQuery, but not both. Adding jQuery to directing is "not that bad" (not the best choice anyways) but it does add another dependency...

[Lau]

You can use either or. It should not be a problem therefore it's up to you if you choose jqLite or jQuery

[Vesko Vujovic]

Is there more detailed documentation or examples about jqlite on the internet? Or maybe a book?

[V31]

ng-book is definitely the first stop I would suggest. Let me find some youtube links for u

[Vesko Vujovic]

Thank you for your recomendation fot this book, i saw the contents, and it looks very useful. Once more thanks

[Vesko Vujovic]

i tried yesterday to play with jqlite it's good, but you can't do so much things, like tih jquery..... What is your opinion on that?

[Navaneeth]

Jquery is a nice lib for Dom manipulation. I don't feel bad in using it. And, the projects I worked are using Jquery with angular.js

[Vesko Vujovic]

this is definitely bad idea, after one year of experience in Angular this is bad bad idea.... (use jquery with angular) only if you need some kind of slider which you cannot find in angular

[Navaneeth]

@VeskoVujovic I never felt that. We use Jquery extensively with angular. Jquery is just part of view. It works seamlessly. One thing I don't encourage much is using ui elements built with Jquery liek Jquery ui and wrapping things for angular. There we need to bridge the gap between non-angular code and angular code

[Vesko Vujovic]

Everything can be done without using jquery with angular app jqlite solves everything... In 1% you will need to use jquery. I agree on using jquery ui compoents with Angular...