javascript - Angular js - 包括 jquery 插件

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 9 年前。

Improve this question

我刚刚接触 Angular JS。

我创建了单页网络应用程序。

现在我想将一些 jquery 插件添加到项目中。但是直接的 jquery 方法不起作用。

我在谷歌上进行了搜索。 link之一。 Plunkr 不起作用。另link ，但没有文档。

而且我找不到有关包含插件的文档。

我发现的只是创建指令。并了解一些有关 Angular Directive(指令)的基本信息。但这个基本步骤不利于我参与为 jquery 插件创建自定义指令。

我正在尝试将 jquery Sparkline 包含在我的 Angular 项目中。并发现this 。但我不知道如何使用它。

• 如何包含各种其他 jquery 插件？
• 我应该如何设计指令以包含 jquery 插件？
• 是否有任何其他 Angular 插件可用于执行此操作，类似于 highcharts-ng ？

提前致谢。

Answer 1

这个答案并不直接针对您的具体情况 - 使用迷你图 - 尽管更通用“如何使用 Angular 的 jquery 插件”

根据插件的不同，其中一些可能很难“Angular-ize”

这就是说，正如您提到的，您的第一步是使用指令。这些是你用来操作 DOM 的东西。

因此，作为起始 block ，我倾向于将 JQuery 插件(如果没有可用的 Angular 插件)包装在指令中。

像这样的伪代码。

myApp.directive('myPluginWrapper', function(){
    return{
       restrict: 'A', // not needed, but what i use
       link: function(scope,element,attrs){
         // element, in this case, is the same as jquery $(myelement)
          // if your jquery plugin runs off the element you can do something like:
           element.myPlugin();

          // if your plugin takes options you can put these in your directive attributes
          // E.G the example plugin wants an ID 3
          var pluginData = {};
          pluginData.ID = attrs.myDirectiveDataId;

          // then pass it into your plugin
           element.myPlugin(pluginData);

      }

    }
});

然后，您可以在 html 中使用此指令:

<div my-pluggin-wrapper  my-directive-data-id="3"></div>

同样，这只是一个示例，说明如何在基本级别上在给定元素上启动 jquery 插件。

要记住的重要一点是，如果您正在加载 Jquery，则所有常用的 JQuery 方法都可用于 元素

此外，必读 - 当您踏入 Angular 时，最困难的部分是尝试不要在 JQuery 中思考......阅读本文，这是一本很棒的读物。 How do I “think in AngularJS” if I have a jQuery background?