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