Question

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

为了实现这一目标，我创建了一个Category工厂，作为一个＆＃34;基类＆＃34;在我的模型中。通过这种方式，我可以扩展/覆盖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属性或getType方法？

Answer 1

ng-switch不适合您的情况。它适用于＆＃34; tab-bars＆＃34;等。在你的情况下，我更喜欢

<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>

Answer 2

也许它会帮助你看看我是怎么做的。我有一个名为stdClass的基类。

在你的情况下我会做s.th.像：

var Category = stdClass.extend({
    constructor:function(attrs){
       this.attrs = attrs || {};
    },
    getType:function(){ return this.type; }
});

var CategoryA = Category.extend({ type:'A' });
var CategoryB = Category.extend({ type:'B' });

现在创建新模型并将它们推送到数组：

var collection = $scope.items = [];

var model = new CategoryA({name:'Peter'});
collection.push(model);

var model = new CategoryB({name:'Paul'});
collection.push(model);

在你看来：

<div ng-repeat="item in items">
    <div ng-if="item.type == 'A'">Category A: {{item.attrs.name}}</div>
    <div ng-if="item.type == 'B'">Category B: {{item.attrs.name}}</div>
</div>

也许这会对你有所帮助。不要犹豫，多问... =）

constructor.name上ngSwitch的替代方法？

2 个答案: