在视图中动态包含指令

Question

假设我有以下指令：

myDirectiveA
myDirectiveB
...

我有一个变量 (module)，它可以是 a 或 b，...我想根据 module 动态显示指令。

我知道我能做到

<div class="my-directives-a" ng-show="module == 'a'"></div>
<div class="my-directives-b" ng-show="module == 'b'"></div>

但这并不是我想要的。在我的项目中，我想要这样的东西

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

所以我创建了这个 plunker script 来验证我的想法，但这似乎行不通:(

我的问题是：这可能吗？如果可能的话怎么办？这首先是个好主意还是我应该尝试以不同的方式解决我的问题？

Answer 1

完成动态指令的一个选项是通过使用 $compile。

给定一个指令：

angular.module(...)
.directive("dynamicDirective", ["$compile", function($compile) {
  return {
    scope: { dirName: "=" },
    link: function(scope, elem, attrs) {
      var template = '<div class="my-directives-"' + scope.dirName + '></div>';
      directiveElem = $compile(template);
      elem.append(directiveElem);
    }
  };
}]);

您可以使用如下指令：

<div dynamic-directive dir-name="module" ng-repeat="module in modules"></div>

在视图中动态包含指令

Dynamically inclusion of directive in the view

angularjs

angular-directive