AngularJS在作用域中使用指令名作为字符串

Question

我有嵌套的angular.js模板。每个模板都有自己的指令。根据传递给ParentTemplate的数据，angular.js应调用匹配指令。

<div class="parent-template">
    <div class="{{childTemplate}}"></div>
    <div class="template1"></div>
</div>

让我们说 $scope.childTemplate = template1 。这两个div都会评估相同的内容 <div class="template1"></div> ，但只有第二个div调用该指令才能按预期显示模板。

我需要一种动态方式来调用相应的模板指令

这是template1的指令

angular.module('myApp').directive('template1', function(){
return {
    restrict: 'C',
    templateUrl: 'templates/template1.html'
}
});

其他模板指令的指令类似。

Answer 1

您尝试设置DOM元素的类。 您可以使用ngClass执行此操作。

否则，如果您想将指令设置为DOM元素的属性。像这样：<div template1> </div>

您可以尝试这种方式：

 var myEl = angular.element( document.querySelector( '#divID' ) );
    myEl.attr('myattr',"attr val");

Answer 2

尝试：

<div ng-class="childTemplate"><div> 

Answer 3

你有没有解决过这个问题？我有一个类似的挑战，我目前通过使用ng-include解决，像这样：

<div class="parent-template">
    <div ng-include="'templates/template1'"></div>
    <div class="template1"></div>
</div>

这适用于您的示例，但是当指令不仅仅包装模板时会变得更加棘手，例如使用DOM或添加控制器。

在这种情况下，您可以使用模板中的指令。

然而，这感觉有点哈哈，我想要更直接的方法

对我来说，这一切都是由一篇关于反应插件的文章引发的，其中你基本上枚举了一组反应组件以获得一个功能集：https://nylas.com/blog/react-plugins