如何在AngularJS中动态生成指令？
如何在AngularJS中动态生成指令？
提问于 2013-09-19 12:17:07
我希望能够接受一个字符串数组，然后根据这些字符串创建指令。任何一个元素或属性都可以正常工作，但似乎无法正常工作。
<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>这些东西都起不了作用。有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-09-19 13:05:14
您可以定义一个将代理另一个指令的指令，如下所示
<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的私有函数，所以很容易复制/粘贴某些部分，但是很难看……我已经编写了一个与您的usecase 这里相匹配的演示。
另一个解决方案，如果您不介意您的代理指令与proxy指令中的元素共享，则应该在运行时$compile一个动态模板，您将包括它。这是一个演示。
Stack Overflow用户
发布于 2013-09-19 12:52:06
ng-include可以帮你。方法是为每个指令定义一个模板。就像这样
<script type="text/ng-template" class="template" id="test-module">
<test-module></test-module>
</script>然后在ng-重复做
<div ng-repeat="module in modules.directives">
<ng-include src="module.directive">
</div如果模板id与module.directive匹配，则将呈现该指令。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18894403
复制相关文章
相似问题
腾讯云开发者
