Como aplico uma diretiva AngularJS com base em uma class definida por ng-class?

Eu estou tentando aplicar condicionalmente uma diretiva para um elemento com base em sua class.

Aqui está um caso simples do meu problema, veja os resultados neste violino . Para este exemplo, estou usando o mapa de nomes de classs para o formato booleano de ng-class com true ; no meu caso atual eu gostaria de usar o resultado booleano de uma function.

Marcação:

 
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'); } } } ); 

Por que a diretiva não está sendo aplicada ao div que está recebendo sua class por meio da class ng-class ? Estou entendendo mal a ordem em que o AngularJS está processando diretivas?

Como devo aplicar condicionalmente uma diretiva a um elemento com base na avaliação de uma expressão?

ng-class apenas define classs no DOM, após o processo de compilation.

Talvez a melhor maneira de aplicar a diretiva seria através de um atributo HTML:

 

Claro, isso não é condicional, mas deixaria o condicionamento para a diretiva:

 
Hello
Condition

e

 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'); }; }); } } }); 

Observe que o nome da diretiva é testCase vez de testcase , o scope: {'condition': '='}, bit assegura que o atributo condition esteja sincronizado e disponível como scope.condition e o watch avalia o segundo argumento toda vez que a expressão no primeiro altera o valor. JsFiddle por aqui .

Talvez você também deva investigar o 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'); } } }) 

De acordo comigo, não use uma diretiva condicional baseada em uma class definida por ng-class como essa questão.

Não use isso

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

porque é realmente muito complicado lidar com situações complexas, então sempre use condições em sua diretiva personalizada.

Usa isto

 link: function (scope, element, attrs) { scope.$watch('condition', function(condition){ if(condition){ // something going here } else{ // something going here }; }); }