Добавьте атрибут ng-class к элементу root директивы angularjs - PullRequest
Новая
       40

Добавьте атрибут ng-class к элементу root директивы angularjs

1 голос
/ 24 февраля 2020

У меня есть директива, которая выглядит примерно так: ng-class в шаблоне: 

module.directive('myDirective', [function() {
    return {
        restrict: 'E',
        template: `<div ng-class="{'foo-expanded': expanded, 'foo': !expanded}"><div>`
        //...
    }
}]);

Моя проблема в том, что мои классы из ng-class применяются к div, который заканчивается вложением в элемент директивы после компиляции директивы: <my-directive><div>...</div></my-directive>.

Есть ли способ применить классы к элементу root <my-directive>? Я знаю, что могу динамически добавлять класс, используя javascript в функции ссылки или контроллере вместо ng-class, но я ищу способ избежать этого.

Ответы [ 2 ]

2 голосов
/ 24 февраля 2020

Вы можете сделать это, используя функцию link, которая дает вам доступ к созданному элементу (директива) 

module.directive('myDirective', [function() {
    return {
        restrict: 'E',
        template: `<div ng-class="{'foo-expanded': expanded, 'foo': !expanded}"><div>`
        link: function(scope, element, attrs) {        
           element[0].classList.add('test')
        }
    }
}]);
1 голос
/ 25 февраля 2020

Этот ответ показывает два разных способа

  • Управление классами из контроллера
  • Использование replace: true (устарело)

Манипулирование классы из контроллера

Если вы не хотите использовать replace: true, вы можете манипулировать классами директивы root из контроллера, введя $element. 

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: `
          <div ng-class="{'foo-expanded': expanded, 'foo': !expanded}">
             MY DIRECTIVE
          <div>
        `,
        controller: function($element) {
            $element.addClass("foo test test2");
            $element.toggleClass("foo-expanded");
            $element.removeClass("test2");
        }
    }
});

DEMO на PLNKR

Для получения дополнительной информации см.

Использование replace: true (устарело)

Другой подход заключается в использовании replace: true: 

module.directive('myDirective', [function() {
    return {
        restrict: 'E',
        replace: true,
        template: `<div ng-class="{'foo-expanded': expanded, 'foo': !expanded}"><div>`
        //...
    }
}]);

Имейте в виду, что свойство replace устарело в AngularJS и был удален в новом Angular (v2 +).

Для получения дополнительной информации см.

...