在我的元素标记上添加和删除其他类

Posted 2021-05-04

我正在学习Angular.js，第一眼看到我觉得这很容易。 ：P。但我被困在这里。我想要的是在我的<.a>（锚）标签上添加另一个类。

我的html代码：

<a href="#/services" title="Services" class="scroll">
<a href="#/portfolio" title="Portfolio" class="scroll">

假设当我点击服务链接时，它会添加“启用”类

<a href="#/services" title="Services" class="scroll enabled">
<a href="#/portfolio" title="Portfolio" class="scroll">

然后，如果我点击投资组合链接，它也将添加“启用”类，并将从服务锚标记中删除启用的类

<a href="#/services" title="Services" class="scroll">
<a href="#/portfolio" title="Portfolio" class="scroll enabled">

实现这一目标的最佳方法是什么？阅读ng-click和ng-class，还有ng-class支持三元运算符？他们的文档没有说明这一点。 link

答案

我也是从Angular开始，在类似的情况下我正在使用指令，请查看：

yourApp.directive('scroll', function () {        
    return {
    restrict : 'C',
        link: function(scope, element) {
            element.bind("click" , function(e){
                 $("a").removeClass("enabled"); // Here we need jQuery
                 element.addClass("enabled");
            });     
        }
    }
});

更新Hurray，我找到了一个没有jQuery的解决方案！ element的click处理程序现在看起来像这样：

element.bind("click" , function(e){
   element.parent().find("a").removeClass("enabled"); // Vanilla jqLite!
   element.addClass("enabled");
}); 

Plunker：http://plnkr.co/edit/jw16wW

另一答案

只需在angular函数中添加此代码即可删除class

angular.element(document.querySelector(".yourClass")).removeClass("yourClass");

要么

angular.element(document.querySelector("#yourSelector")).removeClass("#yourSelector");

谢谢

另一答案

试试这种方式

    <a href="#/services" title="Services" ng-class="{active: $route.current.activeTab == 'services'}>
    <a href="#/portfolio" title="Portfolio" ng-class="{active: $route.current.activeTab == 'portfolio'}>

and in the app.js
inject the route service like this
    angular.module('myModel',[]).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/services', {
                            templateUrl: 'my.tpl',
                            controller:,,myCtrl,
                            activeTab:  "services"
                        }). 
                       when('/portfolio', {
                            templateUrl: 'my2.tpl',
                            controller: myCtrl2,
                            activeTab:  "portfolio"
                        })
    });

“activeTab”是一个自定义变量，ng-class将依赖它来显示。