動態納入指令

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>