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>

在视图中动态包含指令

1 个答案: