Thêm & Xóa lớp bổ sung trên thẻ phần tử của tôi

Question

Tôi đang học Angular.js và lúc đầu thoáng nhìn, tôi nghĩ nó thật dễ dàng. : P. Nhưng tôi bị kẹt ở đây. Điều tôi muốn là thêm một lớp khác vào thẻ < .a> (anchor) của tôi.

Mã HTML của tôi:

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

Giả sử khi tôi nhấp vào liên kết dịch vụ nó sẽ thêm "kích hoạt" class

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

sau đó nếu tôi nhấp vào liên kết danh mục đầu tư nó sẽ thêm "kích hoạt" class đồng thời xóa lớp đã bật khỏi thẻ liên kết dịch vụ

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

Cách tốt nhất để ac là gì hieve this? Tìm hiểu về ng-click và ng-class, và cũng hỗ trợ ng-class ternary operator? Tài liệu của họ không nói gì về điều đó. link

Answer 1

tôi bắt đầu với góc quá, và trong những trường hợp tương tự như tôi đang sử dụng chỉ thị, kiểm tra này:

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"); 
      });  
     } 
    } 
}); 

CẬP NHẬT Hurrah, tôi tìm thấy một giải pháp mà không jQuery! click handler element 's bây giờ trông như thế này:

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

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

Answer 2

thử nó theo cách này

<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" là một biến tự định nghĩa, ng-class sẽ được hiển thị dựa vào nó.

Answer 3

chỉ cần thêm đoạn mã này trong chức năng góc của bạn để loại bỏ lớp

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

HOẶC

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

Cảm ơn