ng-class 未应用答案

【问题标题】：ng-class not being appliedng-class 未应用
【发布时间】：2013-03-28 11:31:45
【问题描述】：

我有一个文本区域，其中包含要发布的消息和一个包含可用字符数的范围。

<textarea name="" cols="" rows="" maxLength="{{maxMessageLength}}" ng-model="messageText"/>
<div id="chatmessage-buttons">              
    <a ng-click="sendMessage()"><span>Invia</span></a>
<span ng-class="{message-length-alert: (messageText.length > messageLengthAlertTreshold), message-length: true}">{{maxMessageLength - messageText.length}}</span>
</div>

messageText、maxMessageLength和messageLengthAlertTreshold都定义在$scope中，当我在textarea中插入文本时，跨度内的计数器正确更新，改变了messageText.length的值。

但是，无论 messageText 中包含的值如何，css 类 message-length 和 message-length-alert 都不会应用于我的 span。

我还尝试删除对message-length-alert 的检查，只留下{message-length: true} 的ng-class 属性，但无论如何它都没有应用。

我错过了什么？

【问题讨论】：

标签： angularjs ng-class

【解决方案1】：

尝试将类名用引号括起来。而不是：

ng-class="{message-length-alert: (messageText.length > messageLengthAlertTreshold), message-length: true}

试试：

ng-class="{'message-length-alert': (messageText.length > messageLengthAlertTreshold), 'message-length': true}

这是因为哈希键必须是字符串或类似变量的名称。

【讨论】：

如果类名中有连字符，您只需要将类名用引号括起来。否则你不需要这个。