在Angular js中使用jQuery插件的最佳方法是什么

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的jqLit​​e，

这是供参考的链接-https: //docs.angularjs.org/api/ng/function/angular.element

Answer 3

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

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

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

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

您可以阅读有关差异的更多信息。jQuery document.ready与自调用匿名函数