3

我希望能够获取一个字符串数组，然后根据这些字符串创建指令。元素或属性都可以正常工作，但似乎无法正常工作。

<div ng-repeat="module in modules.directives">
    <div {{module.directive}}></div>
</div>

<div ng-repeat="module in modules.directives">
    <{{module.directive}}></{{module.directive}}>
</div>

<div ng-repeat="module in modules.directives">
    <{{module.directive}} />
</div>

无法使任何这些工作。有任何想法吗？

4

2 回答 2

4

您可以定义一个指令来代理另一个指令，就像这样

<div proxy="'ng-if'" proxy-value="'foo'"></div>
<div ng-init="n='ng-if'; v='foo';" proxy="n" proxy-value="v"></div>

这都相当于

<div ng-if="foo"></div>

proxy指令定义将是

app.directive('proxy', function ($parse, $injector) {
    return function (scope, element, attrs) {
        var nameGetter = $parse(attrs.proxy);
        var name = nameGetter(scope);
        var value = undefined;
        if (attrs.proxyValue) {
          var valueGetter = $parse(attrs.proxyValue);
          value = valueGetter(scope);
        }
        var directive = $injector.get(name + 'Directive')[0];
        if (value !== undefined) {
            attrs[name] = value;
        }
        return directive.compile(element, attrs, null)(scope, element, attrs);
    };
});

这实际上是一种有趣的指令，一生只写一次。:-) 但它缺少很多本机指令功能（例如template、templateUrl、controller等）。所有这些功能都可以在原始 Angular 源代码中的一个名为 的私有函数中使用，因此很容易复制/粘贴某些部分，但是很难看……我已经编写了一个与您的用例匹配的applyDirectivesToNode演示。

如果您不介意代理指令与proxy指令的元素不共享相同的元素，另一种解决方案是$compile在运行时包含一个动态模板。这是一个演示。

于 2013-09-19T13:05:14.187 回答
1

ng-include能帮你。方法是为每个指令定义一个模板。像这样的东西

<script type="text/ng-template" class="template" id="test-module">
<test-module></test-module>
</script>

然后在 ng-repeat 中

<div ng-repeat="module in modules.directives">
     <ng-include src="module.directive">
</div

如果模板id与module.directive该指令匹配，则会被渲染。

于 2013-09-19T12:52:06.883 回答