Question

我正在使用带有Angular项目的jQuery插件，但是使用jQuery方式

    $(document).ready(function(){
      //calling plugin here
    });

这很好用。我知道这不是正确的方法，并不是强烈推荐，但我已经在这个主题上搜索了几个博客和网站。他们说我们可以为此创建指令但是我无法理解如何为jQuery插件创建任何指令以及它将如何工作？是否可以为每个jQuery插件创建一个Angular指令？

Answer 1

您可以创建类似这样的内容

App.directive('jqueryPlugInDirective', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        $(element).[jqueryPlugin](ConfigOptions);
      }
    };
});

你的html就像是

 <script type="text/javascript" src="pluginLibFile.js"></script>    
 <div jquery-plug-in-directive></div>

Answer 2

不建议混淆jQuery和AngularJs，但是，你只需要，你需要使用Angular的jqLite，

以下是参考资料的链接 - https://docs.angularjs.org/api/ng/function/angular.element

Answer 3

我更喜欢使用传递全局jQuery元素的匿名函数。

(function($){
  //code 
})(jQuery);

使用匿名函数并将jQuery作为参数传递可以消除由于某些其他库覆盖$而引起的问题。
因为我们将(JQuery)全局对象作为参数传递并将其接收到($)所以，现在使用jQuery，无论是否覆盖它都是jQuery。

但是，您可以使用原生Angular jQuery版本.. jQLite也可以使用angular.Element()。

您可以详细了解差异.. jQuery document.ready vs self calling anonymous function

将jQuery插件用于Angular js的最佳方法是什么？

3 个答案: