CODEWITHSUNDEEP
jqueryangularjs
Sukesh Kotian
Sukesh Kotian

Reputation: 76

AngularJS: How to execute jquery inside directive

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

Upvotes: 0

Views: 560

Answers (3)

Sukesh Kotian
Sukesh Kotian

Reputation: 76

Updating my jQuery library solved the issue.

Upvotes: 0

fluminis
fluminis

Reputation: 4079

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

Upvotes: 1

Tome Pejoski
Tome Pejoski

Reputation: 1582

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.

Upvotes: 0

Related Questions