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

Posted 2023-03-06

【中文标题】将 ng-class 属性添加到 angularjs 指令的根元素

【英文标题】：Add ng-class attribute to root element of angularjs directive

【发布时间】：2020-06-08 11:46:09

【问题描述】：

我有一个大致像这样的指令，模板中有一个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 动态添加类，但我正在寻找一种避免这种情况的方法。

【参考方案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')
        
    
]);

【讨论】：

感谢您的建议。但是，我想避免从链接函数或控制器中添加带有 javascript 的类。问题是，我必须引入更多的复杂性才能获得与ng-class 相同的功能。例如，我需要切换expanded 标志以在每次标志更改（或类似的东西）时添加和删除类的方法。但是，如果我无法弄清楚其他任何事情，您的解决方案可能就是我所采取的路径，在这种情况下，我会选择您的答案。

【参考方案2】：

这个答案显示了两种不同的方式

从控制器操作类 使用replace: true（已弃用）

---

从控制器操作类

如果你不想使用replace: true，你可以通过注入$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 on PLNKR

有关详细信息，请参阅

AngularJS element API Reference

---

使用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+) 中删除。

有关详细信息，请参阅

AngularJS Comprehensive Directive API Reference - replace How to use the 'replace' feature for custom AngularJS directives? Why is `replace` property deprecated in AngularJS directives? AngularJS $compile Service API Reference - Issues with replace:true。