在Angular中使用jQuery插件

Using jQuery Plugins alongside Angular

本文关键字：jQuery 插件 Angular      更新时间：2023-09-26

我知道理想情况下应该将jQuery插件重新打包成指令，但我不确定我对这种方法的感受。首先，这意味着无论插件何时更新，都不只是拉一个新的repo，还需要编辑指令。

我怎么能保持角模块从jquery插件可能通过它的api与jquery插件通信分开。requires或类似的库是否适合于此?

只要插件维护他们的api，你的指令应该继续按预期工作。jQuery插件上的指令实际上只是一个采用Angular Way的包装器。

由于大多数jQuery插件都是通过对特定dom选择(通常传递一个options对象)的单个函数调用来启动的，因此您使用的指令样板非常常见。

通过采用angular的方式，你所做的是抽象jQuery插件的功能，以允许一个更模块化和声明性的html。除了传入任何作用域值来控制插件更新(如果它是一个本地指令，你无论如何都会这样做)，一个基本指令将如下所示:

angular.directive('jqWrapper', ['$timeout', function($timeout){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            $timeout(function(){
                elem.myJQueryFunction();
            });
        }
    };
}]);

显然，选项和手表可能会使它在需要的时候变得有点复杂，但上面的指令可能会与许多jQuery插件一起工作。还要注意$timeout的使用，以确保插件在渲染后应用。

所以基本上不要认为指令是使jQuery插件工作所必需的。指令是一种额外的功能，它可以将所需的jQuery代码转换为更模块化和更有用的东西。

相关文章：