如何编写创建其他指令的DOM元素的AngularJS指令？ [英] How to write an AngularJS directive that creates DOM elements that are other directives?

问题描述

我在写一些pretty复杂的DOM操作，这是一定要测试我写得很复杂指令的能力。我还没有碰到过任何的例子（我想反正），展示我想要做什么。

I'm writing some pretty complex DOM manipulations, which is sure to test my ability to write very complex directives. I have not come across any examples (I think anyway) that demonstrate what I'd like to do.

让我们说我有小部件列表，可以是不同类型。这些部件需要进行一个＆LT内显示; UL＆GT; 元素。每种类型的widget可以是不同的，所以对于里面每个插件的实际标记中的＆LT;李方式＆gt; 将大大不同。

Let's say I have a list of widgets, which can be of different types. These widgets need to be displayed within an <ul> element. Each type of widget can be different though, so the actual markup for each widget inside the <li> will drastically be different.

如果所有我需要的是标准的标记，我不认为这将是很难实现这一点，但每个这些小部件会反过来要创造，我想角处理HTML片段。他们可能是一些简单的像想用 NG-点击，但也许更复杂的东西像想用我自己的自定义指令了。

If all I needed was standard markup, I don't think it would be that difficult to implement this, but each of these widgets will in turn have to create html fragments that I want Angular to process. They could be something simple like wanting to use ng-click, but maybe something more complex like wanting to use my own custom directive too.

在理想情况下，我愿意为每个单独小部件的创建指令，只是因为我觉得code，他们多半会在自己的相当复杂的分离关注。然后，我可能希望有另一个指令检查控件的类型，并创建一个使用单个部件指令的HTML片段。那有意义吗？如果没有，那么我很可能要以类似的方式分离关注。

Ideally, I'd want to create directives for each of the widgets separately, just to separate concerns because I think the code for most of them will be quite complex in of themselves. Then, I'd probably want to have another directive check the type of the widget and create an html fragment that uses the individual widget directives. Does that make sense? If not, then I'd probably want to separate concerns in a similar way.

有没有办法做到这一点？

Is there a way to do this?

推荐答案

虽然问题是开放的不同的解决方案，则带有超级指令，这是负责创建部件建议策略，包含在一些数据结构，似乎是合理的。正如我已经评论说，我没有看到任何与此根本问题，虽然精简它可能是一个挑战。

Although the problem is open to different solution, the strategy you suggest with a "super directive" which is responsible for creating the widgets, contained in some data structure, seems reasonable. As I already said in a comment, I don't see any fundamental problem with this, although streamlining it could be a challenge.

为了，说明一些工作code中的基本概念使用 $编译，看到的小提琴。

In order to illustrate the basic idea with some working code, using $compile, see this fiddle.

假设一个范围限制的数据结构

Assuming a scope-bound data structure

$scope.widgets = [
    {directive: 'widget-directive-one'},
    {directive: 'widget-directive-two'},
];

与模板

<ul>
    <li ng-repeat="widget in widgets" super-directive="{{ widget.directive }}"></li>
</ul>

超级指令可以编译给它，像这样的指令：

The "super directive" could compile the directives given to it like so:

angular.module('myApp').directive('superDirective', function($compile) {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {

            // Create an element of the correct type
            var widgetElement = document.createElement(attrs.superDirective);

            // Possibly modify widgetElement here

            // Compile the element and append it to the LI element
            elem.append($compile(widgetElement)(scope));
        }
    };
});

请参阅该指令作为一个概念证明。它可能会需要大量的工作来发挥作用，只要你想，很大一部分取决于设计选择。

See this directive as a proof of concept. It will probably need a lot of work to function as you want, much of it depending on design choices.

这篇关于如何编写创建其他指令的DOM元素的AngularJS指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！