javascript - constructor.name 上 ngSwitch 的替代方案？

Question

在我当前的项目中，我必须处理多种类型的 Categories 。每个类别必须以不同的方式呈现，并且具有不同的功能。

为了实现这一目标，我创建了一个 Category工厂在我的模型中充当“基类”。通过这种方式，我可以扩展/覆盖 Category行为(例如，通过定义包含子类别的 MultiCategory)。

当我尝试以不同的方式呈现每个类别类型时，问题就出现了:为了做到这一点，我定义了一个指令:

<div ng-repeat="category in data.categories" category="category"></div>

在我的设计中，该指令将打开 category.constructor.name决定如何渲染自身:

<div class="container" ng-switch="category.constructor.name">
    <div ng-switch-when="MultiCategory"></div>
    ....
</div>

但是，当我尝试这样做时，AngularJS 向我抛出了一个错误，因为它不允许 constructor.name表达式。 (与安全相关)

我通过实现函数找到了解决方法

Category.prototype.getType = function() {
    return this.constructor.name;
}

开关变成:

...ng-switch="category.getType()"...

请参阅此 jsfiddle 中的示例.

到目前为止，它工作正常，但我对这种方法不太满意。它要求我污染Category.prototype ，并且如果使用 constructor.name 存在安全问题，我想向他们讲话。

所以我的问题是:有人能想出更好的方法吗？

编辑:

评论/答案集中在 ngSwitch 的使用上，但这不是这个问题提出的问题。我使用

仍然遇到同样的问题

ng-if="category.constructor.name"

重点是:确定不需要恢复到 constructor.name 的模型对象类型的最佳方法是什么？ ？我真的需要用 type 来污染我的模型吗？属性(property)或getType方法？

Answer 1

ng-switch 不是适合您情况的最佳工具。它适用于“标签栏”之类的东西。在你的情况下我更喜欢

<div ng-repeat="category in data.categories">
    <ng-if="category.type == 'exampleTypeA'"></div>
    <ng-if="category.type == 'exampleTypeB'"></div>
    <ng-if="category.type == 'exampleTypeC'"></div>
    ...
</div>