如何编写一个AngularJS指令来创建其他指令的DOM元素？

Question

我正在编写一些非常复杂的DOM操作,这肯定会测试我编写非常复杂的指令的能力.我没有遇到过任何能够展示我想做的事情的例子(我认为无论如何).

假设我有一个小部件列表,可以是不同类型的小部件.这些小部件需要在<ul>元素中显示.但是每种类型的小部件都可以是不同的,因此内部每个小部件的实际标记<li>将大不相同.

如果我需要的只是标准标记,我认为实现它并不困难,但是这些小部件中的每一个都必须创建我希望Angular处理的html片段.它们可能是想要使用的简单东西ng-click,但也许更复杂,比如想要使用我自己的自定义指令.

理想情况下,我想分别为每个小部件创建指令,只是为了区分问题,因为我认为大多数小部件的代码本身都很复杂.然后,我可能想要另一个指令检查窗口小部件的类型并创建一个使用各个窗口小部件指令的html片段.那有意义吗？如果没有,那么我可能想以类似的方式区分问题.

有没有办法做到这一点？

Answer 1

虽然问题对于不同的解决方案是开放的,但是您建议使用"超级指令"的策略似乎是合理的,该策略负责创建包含在某些数据结构中的小部件.正如我在评论中已经说过的那样,我没有看到任何根本问题,尽管精简它可能是一个挑战.

为了用一些工作代码说明基本思想,使用$compile,请看这个小提琴.

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

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

与模板

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

"超级指令"可以编译给它的指令,如下所示:

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));
        }
    };
});

请参阅此指令作为概念证明.它可能需要大量工作才能按您的需要运行,其中大部分都取决于设计选择.