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

Question

我正在编写一些非常复杂的 DOM 操作，这肯定会测试我编写非常复杂的指令的能力。我没有遇到任何示例（我认为无论如何）可以证明我想做的事情。

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

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

理想情况下，我想分别为每个小部件创建指令，只是为了分离关注点，因为我认为它们中的大多数代码本身将非常复杂。然后，我可能想让另一个指令检查小部件的类型并创建一个使用各个小部件指令的 html 片段。那有意义吗？如果不是，那么我可能想以类似的方式分离关注点。

有没有办法做到这一点？

Answer 1

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

为了用一些工作代码说明基本思想，使用$compile，请参阅fiddle。

假设一个范围绑定的数据结构

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

将此指令视为概念证明。它可能需要大量工作才能按您的意愿运行，其中大部分取决于设计选择。