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

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

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

Разметка:

<div ng-app="example">
  <div class="testcase">
    This will have the directive applied as I expect
  </div>
  <div ng-class="{'testcase':true}">
    This will not have the directive applied but I expect it to
  </div>
</div>

JS:

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

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

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

Ответ 1

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

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

<div test-case>

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

<div ng-app="example" ng-controller="exampleCtrl">
    <div test-case condition="dynamicCondition">Hello</div>
    <input type="checkbox" ng-model="dynamicCondition"/> Condition 
</div>

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:

<div ng-switch="conditionFunction()">
  <div ng-when="true" test-case>Contents when conditionFunction() returns true</div>
  <div ng-when="false">Contents when conditionFunction() returns false</div>
</div>

Ответ 2

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

Ответ 3

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

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

<div ng-app="example">
  <div class="testcase">
    This will have the directive applied as I expect
  </div>
  <div ng-class="{'testcase':true}">
    This will not have the directive applied but I expect it to
  </div>
</div>

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

Используйте этот

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