javascript - 使用 Angular 指令初始化多个 jQuery 插件

Question

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

详细信息:

我正在将 CodeIgniter 与 Angular.js 一起使用，并且我对在应用程序中初始化许多插件的概念感到困惑。我有大约 5 个想要使用的插件(下拉菜单、 slider 等)。

问题:

我在网上看到过有关如何初始化插件的示例，如下所示:

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 的概念？有什么帮助吗？

Answer 1

我认为您没有遗漏任何概念。实际上这个概念就是关注点分离。

现在，仅初始化插件似乎有些过大，但从长远来看，它为您提供了扩展指令的灵 active 。这似乎有点矫枉过正，因为您没有向插件初始化传递任何选项，但随着应用程序的增长，每个实例都有不同的配置。

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

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