在 angularjs 指令中，我想在 HTML 中找到一个 id 并在其上添加类

Posted 2023-05-09

【中文标题】在 angularjs 指令中，我想在 HTML 中找到一个 id 并在其上添加类

【英文标题】：In angularjs directive I want to find an id in a HTML and add class on it

【发布时间】：2018-11-10 06:55:56

【问题描述】：

我有一个 ID 为“#collapse1”的 html，其中数值是动态生成的。我想在页面加载时找到该特定 id 并在其上添加一个类。

我的指令代码是

app.directive('mainSidebar',
  ['$localStorage','$rootScope',function($localStorage,$rootScope)
    return
        restrict : 'AEC',
        transclude :  true,
        controller : 'SidebarController',
        templateUrl : 'app/sidebar/sidebar.html',
        link: function(scope, element, attrs) 
          element.find('#collapse1').addClass("panel-collapse collapse in");
        
    
])

如果你能帮我编写正确的代码来查找和添加类，我会很高兴。

【问题讨论】：

link 函数中的元素是什么？是 jquery 对象吗？

很确定应该是：element[0].getElementById("collapse1").addClass("panel-collapse") 如果我没记错的话，.addClass 方法也一次接受一个类。

你可以包含你的指令的模板

@amicoderozer 你是对的，但是这不再是一个 jQuery 对象了。

@amicoderozer 这是你不应该在 Anuglarjs 旁边使用 jQuery 的原因之一，除了 DOM 操作后明显的 Angularjs 摘要循环问题。

【参考方案1】：

使用 AngularJS 框架，使用 ng-class 指令添加和删除类：

<div id="collapse" ng-class="'panel-collapse': addClass,
                              'collapse': addClass,
                              'in': addClass" >
</div>

<button ng-click="addClass = !addClass">
    addClass ? 'Remove' : 'Add' 
</button>

有关详细信息，请参阅AngularJS ng-class Directive API Reference。

【参考方案2】：

除非您还在项目中加载了 JQuery，否则 element.find('#collapse1') 将无法工作，因为 JQLite 无法根据 ID 找到 it's limited by tag name。

但是，您可以使用 DOM 函数获取元素并将其包装在 AngularJS 元素中。

angular.element(document.getElementById('collapse1')).addClass("panel-collapse collapse in");

附： georgeawg 的答案是首选方法，但假设您可以控制该 HTML 以便将 ng-class 添加到其中，这就是我提交替代答案的原因。

【参考方案3】：

你可以使用

element[0].getElementById("collapse1").addClass("panel-collapse collapse in");

或

document.getElementById("collapse1").addClass("panel-collapse collapse in");

【讨论】：

addClass 方法是一个 jQuery 方法。原始 DOM 元素需要转换为 jQuery 元素。