Using Jquery Inside Angularjs Directive Good Or Bad Idea?

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(){

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!