AngularJS指令：取決於屬性值的開關語句

Question

我有一個指令，它可以作爲屬性給出它可以採取的13種類型之一。根據類型，指令應返回代表給定類型的不同HTML元素。該類型的值將是常量 - 編譯指令後不會更改。

<directive type="{{ type }}"></directive> 

我有一個架構問題。我是否應該處理1個指令中的所有類型（以便指令根據type的值返回不同的模板），或者將模板級的類型案例區分爲13個不同的指令（根據type的值調用適當類型的指令）？總之，我應該把switch (type)放在一個指令裏面還是放在模板層面？

然後執行。該解決方案的實施將會是什麼？總之，如何在指令或模板中實現switch (type)。

Answer 1

沿着單指令路線走下去可能是最容易的，在這種情況下，我可以想到兩個解決方案。最好取決於各個模板的大小。

小模板：ng-switch

給你的指令，一個HTML文件，因爲它是templateUrl其中包含一個ng-switch有ng-switch-when情況下，每個type。這將是這個樣子：

// directive.js 
angular.directive('directive', function() { 
    return { 
     scope: {type: '@'}, 
     templateUrl: '/path/to/directive/template.html' 
    }; 
}); 

// template.html 
<div ng-switch="type"> 
    <div ng-switch-when="somethingType"> 
     <!-- template for (type === "somethingType") --> 
    </div> 
    <div ng-switch-when="otherType"> 
     <!-- template for (type === "otherType") --> 
    </div> 
    <!-- ... --> 
</div> 

大模板：ng-include

使用相同的行爲在上面directive.js但保留所有的模板中自己個人的HTML文件的本地該指令的目錄，然後根據type的值使用ng-include拉入正確的模板。

/path/to/directive 
- /templates 
    - somethingType.html 
    - otherType.html 
- directive.js 
- template.html 

// template.html 
<div ng-include="'/path/to/directive/templates/' + type + '.html'"></div>