Как применить директиву AngularJS на основе classа, установленного ng-classом?

Я пытаюсь условно применить директиву к элементу, основанному на его classе.

Вот простой случай моей проблемы, см. Результаты в этой скрипке . В этом примере я использую карту имен classов для booleans формы ng-class с true ; в моем фактическом случае я хотел бы использовать логический результат функции.

Разметка:

 
This will have the directive applied as I expect
This will not have the directive applied but I expect it to

JS:

 angular.module('example', []) .directive('testcase', function() { return { restrict: 'C', link: function(scope, element, attrs) { element.css('color', 'red'); } } } ); 

Почему директива не применяется к div который получает свой class через ng-class ? Я что-то не понимаю о порядке, в котором AngularJS обрабатывает директивы?

Как я должен условно применять директиву к элементу, основанному на оценке выражения?

ng-class просто устанавливает classы в DOM после процесса компиляции.

Возможно, лучший способ применить директиву – через атрибут HTML:

 

Конечно, это не условно, но я бы оставил условность директивой:

 
Hello
Condition

а также

 angular.module('example', []) .controller('exampleCtrl', function ($scope) { $scope.dynamicCondition = false; }) .directive('testCase', function () { return { restrict: 'A', scope: { 'condition': '=' }, link: function (scope, element, attrs) { scope.$watch('condition', function(condition){ if(condition){ element.css('color', 'red'); } else{ element.css('color', 'black'); }; }); } } }); 

Обратите внимание, что имя директивы – это testCase а не testcase , scope: {'condition': '='}, бит гарантирует, что атрибут условия синхронизирован и доступен как scope.condition и watch оценивают второй аргумент каждый раз, когда выражение на первая изменяет значение. JsFiddle здесь .

Возможно, вам также стоит посмотреть на ng-switch :

 
Contents when conditionFunction() returns true
Contents when conditionFunction() returns false
 angular.module('example', []) .directive('testCase', function() { return { restrict: 'C', link: function(scope, element, attrs) { element.css('color', 'red'); } } }) 

По моему мнению, не используйте условную директиву, основанную на classе, установленном ng-classом, как этот вопрос.

Не используйте это

 
This will have the directive applied as I expect
This will not have the directive applied but I expect it to

потому что это очень сложно обрабатывать в сложной ситуации, поэтому всегда используйте условия в своей настраиваемой директиве.

Использовать это

 link: function (scope, element, attrs) { scope.$watch('condition', function(condition){ if(condition){ // something going here } else{ // something going here }; }); } 
  • Угловая: вызов функции controllerа внутри функции директивной ссылки с использованием &
  • Угловая директива, как добавить атрибут к элементу?
  • Многоуровневые таблицы (внутри другого при нажатии)
  • В чем разница между ng-app и data-ng-app?
  • Как реализовать ng-изменение для пользовательской директивы
  • Понимание опции transclude определения директивы?
  • Использование углового фильтра в входном элементе
  • Угловая динамическая проверка ng-шаблонов
  • Отложить угловое выполнение часов после $ digest (повышение DOM-события)
  • Установите фокус на первый недопустимый ввод в форме AngularJs
  • Как понять «терминал» директивы?
  • Давайте будем гением компьютера.