AngularJS：如何在指令内执行 jquery答案

【问题标题】：AngularJS: How to execute jquery inside directiveAngularJS：如何在指令内执行 jquery
【发布时间】：2016-02-09 13:57:16
【问题描述】：

我有一个使用 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);
    });
})

【问题讨论】：

你应该避免使用 jquery + angular，angular 应该以某种方式满足你的要求......
@Julo0sS 我不同意..
@Julo0sS 这并不完全正确。如果您查看 angular.element 的文档，您会发现那里有 jquery 的基本实现。如果您使用一些 jquery 库，这将失败。
Convert jquery plugin into directive angular的可能重复
@Jai 这不是完全错误的...... ^^ :P

标签： jquery angularjs

【解决方案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"
     });
    }
  };
}]);

【讨论】：

我收到错误docs.angularjs.org/error/$compile/…
我已经更新了我的 plunker，但我无法理解如何使用以下代码 $thumbs = $('.thumbnail').click(function(e) { e.preventDefault( ); $thumbs.removeClass(classHighlight); $(this).addClass(classHighlight); });

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：