动态纳入指令

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

一种是通过使用$编译。

鉴于一条指令：

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>