ng-class messing with the order of classes

Question

I have some very simple Angular code which looks like this...

<div ng-repeat="message in data.messages" ng-class="'conversationCard-' + 
message.type"></div>

It works, but the resulting output looks like this....

<div ng-repeat="message in data.messages" ng-class="'conversationCard-' + 
message.type" class="ng-scope conversationCard-phone"></div>

The problem is that my class now starts with ng-scope which is breaking my css selector which looks like this..

[class^="conversationCard"]

Is there any way of getting angular to remove the ng-scope, or at the very least put it at te end of the class declarations?

Answer 1

It shouldn't matter if you wanted to access that class via css:

div.conversationCard-phone{
    //css stuff
}

I'm not sure why you're using the ability to specify attributes in your css for classes, the method I've described is the common way of doing it. Can you perhaps elaborate on why you're using the attribute selector?

Edit

Change your html to

<div ng-repeat="message in data.messages" ng-class="message.type" class="conversationCard"></div>

So that processed it becomes

<div ng-repeat="message in data.messages" ng-class="message.type" class="ng-scope conversationCard phone"></div>

So in your css you can do

div.conversationCard{
    //css stuff
}

And if you want to isolate the phone one:

div.conversationCard.phone{
    //css stuff
}

Answer 2

How about void using ng-class, just use class like this

<div ng-repeat="message in data.messages" class="conversationCard-{{message.type}}"></div>