使用 Angular 指令初始化多个 jQuery 插件答案

【问题标题】：initializing multiple jQuery plugins using a Angular Directive使用 Angular 指令初始化多个 jQuery 插件
【发布时间】：2013-08-08 17:36:49
【问题描述】：

我是Angular菜鸟，所以请原谅我对这篇文章的无知。

详情：

我正在使用CodeIgniter 和Angular.js，并且在我的应用程序中初始化许多插件的概念上遇到了困难。我有大约 5 个我想使用的插件（下拉菜单、滑块等）。

问题：

我在网上看过一些关于如何初始化插件的例子，如下所示：

embroidery.directive( 'f-foundation', function() {
    return {
            restrict: 'A', 
        link: function( scope, element, attrs ) {
            // each element is needing a explicit init
            element.foundation( 'dropdown', 'start' );
        }   
    }
});

该指令将应用于下拉元素，如下所示：

<select f-foundation>
    <option>test infomation</option>
</select>

这需要在不同的指令中初始化每个插件；一定有更好的方法。

但是，我想知道是否有一种方法可以同时初始化所有插件。如果我不使用 Angular，我将拥有一个简单的 plugin_init() 函数，其中包含

$( element ).chosen();
$( element_2 ).toolbar();
$( document ).foundation(); //etc

我是否缺少 Angular 的概念？有什么帮助吗？

【问题讨论】：

一次初始化所有插件的必要性是什么是登陆页面类型的网站？否则，您可以使用指令并在需要时进行初始化，而不是一次全部初始化，甚至可以使用 requirejs 仅加载所需的插件源，除非这是一个简单的单页类型网站

标签： javascript jquery angularjs

【解决方案1】：

我不认为你错过了一个概念。实际上这个概念是关注点分离。

现在它可能看起来有点矫枉过正，只是为了初始化插件，但从长远来看，它可以让你灵活地扩展你的指令。这似乎有点过头了，因为您没有将任何选项传递给插件初始化，但随着应用程序的增长，每个实例都有不同的配置。

也许它将帮助您将指令视为您的标记和您正在使用的特定插件之间的适配器。如果您不得不更改插件（即chosen => select2），您只需要重写指令内容。

编辑：经过一番思考，我不知道您正在构建的应用程序的大小和范围。也许它是而且矫枉过正。在这种情况下，不要使用 angular 初始化它们，只需按照您的建议进行操作即可。如果它是一个带有联系表的单页营销网站，我只能建议您不要使用指令来执行此操作，除非您是法官。

【讨论】：