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

what is the best way to use jQuery plugin into Angular js

本文关键字：最佳 方式 是什么 插件 jQuery js Angular      更新时间：2023-09-26

我正在使用一个jQuery插件与Angular项目，但与jQuery的方式，如

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

工作正常。我知道这不是正确的方法，也不推荐这么做，但我已经搜索了一些关于这个话题的博客和网站。他们说我们可以为此创建指令但我不明白如何为jQuery插件创建任何指令以及它是如何工作的?是否有可能为每个jQuery插件创建一个Angular指令?

您可以创建如下内容

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>

不建议把jQuery和AngularJs混在一起，但是，如果你不得不使用，你需要使用Angular的jqLite，

这里是一些参考链接- https://docs.angularjs.org/api/ng/function/angular.element

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

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

使用匿名函数和传递jQuery作为参数消除了由于$被其他库覆盖而产生的问题。
当我们将(JQuery)全局对象作为参数传递并接收到($)时，无论它是否被覆盖，$现在都与jQuery一起使用。

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

你可以阅读更多关于差异…jQuery文档。Ready与自调用匿名函数

相关文章：