In my current project I have to deal with many types of Categories
. Each category has to be rendered in a different way, and has different functionalities.
In order to achieve this, I created a Category
factory which acts as a "base class" in my model. In this way, I can extend/override Category
behavior (e.g, by defining a MultiCategory
which contains subcategories).
The problem comes when I try to have each category type render differently: in order to do so, I defined a directive:
<div ng-repeat="category in data.categories" category="category"></div>
In my design, the directive would switch on category.constructor.name
to decide how to render itself:
<div class="container" ng-switch="category.constructor.name">
<div ng-switch-when="MultiCategory"></div>
....
</div>
However, when I tried to do this, AngularJS threw an error at me, because it doesn't allow constructor.name
expressions. (Related to security)
I found a workaround by implementing a function
Category.prototype.getType = function() {
return this.constructor.name;
}
The switch then becomes:
...ng-switch="category.getType()"...
See an example in this jsfiddle.
So far it's working ok, but I'm not really comfortable with this approach. It required me to pollute Category.prototype
, and if there are security concerns in using constructor.name
, I would like to address them.
So my question is: can anyone come up with a better approach?
EDIT:
Comments/answers focus on the use of ngSwitch, but that is not the issue raised by this question. I'd still have the same problem by using
ng-if="category.constructor.name"
The point is: What is the best approach to determine the type of my model objects that doesn't require restorting to constructor.name
? Do I really need to pollute my model with a type
property or a getType
method?