javascript - 如何将指令名称传递给模板 - Angular.js

Question

我有一个指令可以创建一堆类似的小部件。每个小部件都有不同的指令。这是我用来创建小部件的模板:

template: '<li><div {{widgetModel.directiveName}}></div></li>'

我想要协调变量和/或模板来声明需要使用的指令。模板将是:

template: '<li><div directive-name></div></li>'

然后我希望它充当属性名称为 directiveName 的普通指令。当前的代码没有发生这种情况，我不知道如何让它表现得像我需要的那样。 directiveName 指令实际上可以是任何东西。

Answer 1

您可以在编译函数中进行这些更改:

angular.module('myWidgets', [])
  .directive('multiDirective', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs)
        {
            var htmlText = '<ul>' +
                    '<li ' + attrs.directiveName + '>' + '</li>' +
                '</ul>';
            element.replaceWith(htmlText);
        }
    }
})

然后你可以这样调用它:

<multi-directive directive-name='widget1' />