Question

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

<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>

无法使用其中任何一项。有什么想法吗？

Answer 1

您可以定义一个指令代理另一个指令，如此

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

这实际上是一种有趣的指令，可以在生活中写一次。 :-)但它缺少很多原生指令功能（例如模板， templateUrl ，控制器等）。所有这些功能都可以在一个名为applyDirectivesToNode的私有函数中的原始Angular源代码中获得，因此很容易复制/粘贴一些部分，但很丑...我已经编写了一个与您的用例匹配的演示{{3} }。

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

Answer 2

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匹配，则该指令将被呈现。

如何在AngularJS中生成即时指令？

2 个答案: