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
– Julo0sS, Commented Feb 9, 2016 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
– Jai, Commented Feb 9, 2016 at 14:03
Possible duplicate of Convert jquery plugin into directive angular — Mosh Feu
– Mosh Feu, Commented Feb 9, 2016 at 14:03

fluminis · Accepted Answer · 2016-02-09 14:16:36Z

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 9, 2016 at 14:16

fluminis

4,2715 gold badges37 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sukesh Kotian Over a year ago

i got error docs.angularjs.org/error/$compile/…

Sukesh Kotian Over a year ago

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); });

Community · Accepted Answer · 2017-05-23 12:07:34Z

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, 2017 at 12:07

CommunityBot

11 silver badge

answered Feb 9, 2016 at 14:16

Tome Pejoski

1,5802 gold badges11 silver badges34 bronze badges

Comments

Sukesh Kotian · Accepted Answer · 2016-02-10 15:27:51Z

0

Updating my jQuery library solved the issue.

answered Feb 10, 2016 at 15:27

Sukesh Kotian

761 silver badge13 bronze badges

Collectives™ on Stack Overflow

AngularJS: How to execute jquery inside directive

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related