Question

我正在学习Angular.js并且第一眼看到我认为这很容易。：P。但我被困在这里。我想要的是在我的＆lt; .a＆gt;（锚）标签上添加另一个类。

我的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

Answer 1

我也是从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的{{1}}处理程序现在看起来像这样：

click

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

Answer 2

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

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

OR

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

<强>感谢

Answer 3

以这种方式试试

    <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。

添加＆amp;删除元素标记上的其他类

3 个答案: