javascript - 将 ng-class 属性添加到 angularjs 指令的根元素

Question

我有一个大致像这样的指令，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>.

有没有办法将类应用于根<my-directive>元素？我知道我可以在链接函数或控制器中使用 javascript 而不是动态添加类ng-class，但我正在寻找一种避免这种情况的方法。

标签： javascriptcssangularjsangularjs-directiveng-class

Answer 1

您可以使用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')
        }
    }
}]);