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>