2015-12-22 117 views
0

我做了一個簡單的指令。我在該指令上有兩個按鈕。我能夠獲得該按鈕的單擊事件。但是我想在其上添加類。如何添加類按鈕點擊角?

我有一類

.red { 
    background-color: red; 
} 

我想只要按鈕點擊添加這個類..

  • Intially 登錄按鈕有紅色的類。當退出按鈕被點擊它適用於註銷按鈕並從刪除登錄按鈕

或再次,如果我點擊登錄按鈕將它應用在登錄按鈕和註銷按鈕刪除..

我做這樣的

angular.module('app', ['ui.router']).directive('tm', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'login.html', 
    scope: { 
     login: "&", 
     logout: '&' 
    }, 
    controller: 'f', 
    controllerAs: 'vm' 
    }; 
}) 

這裏是代碼 http://plnkr.co/edit/Q1e8u0okOa4looLcb2YO?p=preview

+0

使用'ngClass'。 https://docs.angularjs.org/api/ng/directive/ngClass – Claies

+0

我想用ngClass ..I – user944513

回答

2

添加一個鏈接功能

請試試這個

link: function(scope, elm, attr) { 
    elm.find("button").on("click", function(e) { 
    elm.find("button").removeClass("red"); 
    angular.element(this).addClass("red"); 
    }) 
} 

PLNKR

,也可以使用做ngClass

像這樣

JS

vm.isLogin = true; 
vm.login = function() { 
    vm.isLogin = true; 
} 

vm.logout = function() { 
    vm.isLogin = false; 
} 

HTML

<button type="button" class="btn btn-default" ng-class="{'red': vm.isLogin }" ng-click='vm.login()'>Login</button> 
<button type="button" class="btn btn-default" ng-class="{'red': !vm.isLogin }" ng-click='vm.logout()'>logount</button> 

PLNKR

+0

得到它你的答案是正確的..但我正在尋找使用ng級。我想要寫我的邏輯o控制器。我想採取一個變量..並且該變量成爲真假 – user944513

+0

你的邏輯是失敗時,有3個按鈕..我想這樣做只爲前兩個按鈕..它適用於所有按鈕 – user944513

+0

nope它會工作的所有按鈕,雖然我已經添加了你的ngClass部分@ user944513 –