javascript - 与 Angular 一起使用 jQuery 插件

Question

我知道理想情况下 jQuery 插件应该重新打包成指令，但我不确定我对这种方法有何感受。首先，这意味着，每当插件更新时，这不仅仅是拉取新存储库的问题，而且还要编辑指令。

如何将 Angular 模块与 jquery 插件分开，也许通过其 api 与 jquery 插件进行通信。 requirejs 或类似的库适合于此吗？

Answer 1

只要插件维护其 API，您的指令就应该继续按需要工作。 jQuery 插件指令实际上只是采用 Angular Way 的包装器。

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

通过采用 Angular 方式，您正在做的是抽象 jQuery 插件功能，以允许更加模块化和声明性的 html。除了传入任何范围值来控制插件更新(如果它是 native 指令，您无论如何都会这样做)之外，基本指令如下:

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

            $timeout(function(){
                elem.myJQueryFunction();
            });
        }
    };
}]);

显然，选项和 watch 在需要时会使事情变得复杂一些，但上面的指令可能适用于许多 jQuery 插件。另请注意使用 $timeout 来确保插件在渲染后应用。

所以基本上不要将指令视为使 jQuery 插件工作所需的东西。将指令视为额外功能，将您所需的 jQuery 代码转换为更加模块化和有用的代码。