在Angular中使用jQuery插件

Question

我知道，理想情况下，jQuery插件应该重新打包成指令，但我不确定我对这种方法的感受。首先，这意味着，无论何时更新插件，这不仅仅是一个拉动新回购的问题，还包括编辑指令。

我怎样才能保持与jquery插件分离的角度模块，或许通过它的api与jquery插件进行通信。 requirejs或类似的库是否适合这个？

Answer 1

只要插件保持它们的API，你的指令应该继续按照需要工作。关于jQuery插件的指令实际上只是一个采用Angular Way的包装。

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

通过采用角度方式，你正在做的是抽象jQuery插件功能，以允许更模块化和声明性的HTML。除了通过在任何范围内的值来控制插件更新（你会做无论如何，如果它是一个原生指令），基本指令为如下：

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

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

显然选项，手表变得复杂了一点当需要时，但上面的指令可能适用于很多jQuery插件。还请注意使用$timeout确保插件在渲染后应用。

因此，基本上不要将指令看作是使jQuery插件正常工作所需的指令。将指令看作额外的功能，将您所需的jQuery代码转换为更加模块化和实用的东西。