AngularJS: How to execute jquery inside directive

Question

I have a tree structure which uses jQuery. I had to use the same jQuery in my Angular application. I was able to create the tree structure with angularjs using directives, but i was not able to execute the jQuery. Please check my code http://plnkr.co/edit/JhG4lEiOX6uXYCyHZhOQ?p=preview and let me know what can i do to fix the issue. Below is the jQuery code that need to be executed.

$(function() {
    $("#tree").treeview({
      collapsed: false,
      animated: "medium",
      control: "#sidetreecontrol",
      persist: "location"
    });

    $thumbs = $('.thumbnail').click(function(e) {
      e.preventDefault();
      $thumbs.removeClass(classHighlight);
      $(this).addClass(classHighlight);
    });
})

you should avoid using jquery + angular, angular should fit your requirements somehow... — Julo0sS, Feb 09 '16 at 14:01
@Julo0sS that is not completely true. if you go at docs of angular.element, you can find that has basic implementation of jquery there. which would fail if you use some jquery library. — Jai, Feb 09 '16 at 14:03
Possible duplicate of [Convert jquery plugin into directive angular](http://stackoverflow.com/questions/28630191/convert-jquery-plugin-into-directive-angular) — Mosh Feu, Feb 09 '16 at 14:03

score 1 · Answer 1 · answered Feb 09 '16 at 14:16

1

You can make your own directive to wrap your jQuery plugin

http://bencentra.com/code/2015/09/29/jquery-plugins-angular-directives.html

Example:

var app = angular.module('MyApp', []);
app.controller('AppCtrl', ['$scope', function($scope) {
  $scope.sliderValue = 50;
}]);
app.directive('jqSlider', [function() {
  return {
    restrict: 'A',
    scope: {
      'model': '='
    },
    link: function(scope, elem, attrs) {
      $(elem).treeview({
       collapsed: false,
       animated: "medium",
       control: "#sidetreecontrol",
       persist: "location"
     });
    }
  };
}]);

answered Feb 09 '16 at 14:16

fluminis

3,575
4
34
47

i got error https://docs.angularjs.org/error/$compile/multidir?p0=hierarchy&p1=%20(module:%20myApp)&p2=treeAttr&p3=&p4=new%2Fisolated%20scope&p5=%3Cul%20tree-attr%3D%22%22%20hierarchy%3D%22components%22%3E – Sukesh Kotian Feb 09 '16 at 16:22
I have updated my plunker, but i'm not able to understand how to use the following code $thumbs = $('.thumbnail').click(function(e) { e.preventDefault(); $thumbs.removeClass(classHighlight); $(this).addClass(classHighlight); }); – Sukesh Kotian Feb 09 '16 at 16:53

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

It is true that is not recommended to use jQuery (a lot) when using AngularJS, but if you really need to here is a good example.

Also can check this related Stack Overflow question.

edited May 23 '17 at 12:07

Community

1
1

answered Feb 09 '16 at 14:16

Tome Pejoski

1,582
2
10
34

score 0 · Answer 3 · answered Feb 10 '16 at 15:27

0

Updating my jQuery library solved the issue.

answered Feb 10 '16 at 15:27

Sukesh Kotian

76
1
13

AngularJS: How to execute jquery inside directive

3 Answers3