AngularJS нг-класс не применяя стили CSS

Question

У меня есть сайт компании, который я разрабатываю с AngularJS и у меня возникли некоторые проблемы с ng-class

Вот мой HTML:

<a href="timeEntry.php" ng-class="{{(userRole.admin) ? '' : 'inactive'}}"> 
    LINK 
</a> 

CSS:

.inactive { 
    pointer-events : none; 
    cursor   : default; 
} 

Chrome Проверьте элемент:

<a href="timeEntry.php" ng-class="inactive"> 
    LINK 
</a> 

Очевидно, что я протестировал class="inactive", и он работает так, как должен, источник взгляда Chrome, похоже, показывает мне что-то, что должно работать, но оно не применяется.

Answer 1

Предполагая, что userRole.admin является логическим, это должно работать

<a href="timeEntry.php" ng-class="{ inactive: !userRole.admin }"> 
    LINK 
</a> 

Answer 2

Я думаю, что это будет работать:

<a href="timeEntry.php" ng-class="{inactive:userRole.admin}">Link</a> 

Вы также можете иметь несколько условий в объекте, просто поставить запятые между ними. Формат cssClass:<boolean expression>

Answer 3

нг-класс ожидает, что выражение, так что в исходном коде часть внутри {{}} проводится оценка, и то угловая снова оценивает результат этого, пытаясь интерпретировать «неактивный» как имя переменной. Если вы хотите использовать трехкомпонентной просто опустить {{}} из исходного кода

<a href="timeEntry.php" ng-class="userRole.admin ? '' : 'inactive'"> 
LINK 

Но для этого конкретного примера решения, предложенные другими, используя формат объекта, являются предпочтительными.