如何在 AngularJS 中即时生成指令? [英] How can I generate on the fly directives in AngularJS?

问题描述

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

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

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

无法让其中任何一个工作.有什么想法吗?

解决方案

你可以定义一个指令来代理另一个像这样的指令

<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) {返回函数(范围、元素、属性){var nameGetter = $parse(attrs.proxy);var name = nameGetter(scope);var 值 = 未定义；如果(attrs.proxyValue){var valueGetter = $parse(attrs.proxyValue);值 = valueGetter(范围)；}var 指令 = $injector.get(name + 'Directive')[0];如果(值！== 未定义){属性[名称] = 值；}return directive.compile(element, attrs, null)(scope, element, attrs);};});

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

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

I want to be able to take an array of strings, and then create directives based upon those strings. Either element or attribute will work fine but can't seem to get it working.

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

Can't get any of these to work. Any ideas?

解决方案

You could define a directive that would proxy another directive like so

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

that would both be equivalent to

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

the proxy directive definition would be

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

This is actually kind of a fun directive to write once in a life. :-) but it lacks a lot of the native directive features (for instance template, templateUrl, controller, etc). All those features are available in the original Angular source code in a private function called applyDirectivesToNode, so it is easy to copy/paste some parts, but ugly... I have written a demo matching your usecase here.

Another solution, if you don't mind your proxied directive does not share the same element as the proxy directive's one, would be to $compile a dynamic template at runtime that you would include. Here is a demo.

这篇关于如何在 AngularJS 中即时生成指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！