Question

我有一个使用jQuery的树结构。我必须在我的Angular应用程序中使用相同的jQuery。我能够使用指令创建带有angularjs的树结构，但我无法执行jQuery。请检查我的代码http://plnkr.co/edit/JhG4lEiOX6uXYCyHZhOQ?p=preview并告诉我如何解决问题。下面是需要执行的jQuery代码。

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

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

Answer 1

您可以制作自己的指令来包装jQuery插件

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

示例：

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

Answer 2

确实不建议在使用AngularJS时使用jQuery（很多），但如果你真的需要这里是good example。

也可以查看相关的Stack Overflow question。

Answer 3

更新我的jQuery库解决了这个问题。

AngularJS：如何在指令中执行jquery

3 个答案: