Creating a simple directive with two buttons. Able to detect click events on the buttons, but now looking to add a custom class upon clicking.
There is a predefined class:
.red {
background-color: red;
}
The goal is to dynamically apply this class when a button is clicked.
- Initially, the login button will have the red class. Upon clicking the logout button, the red class should transfer to the logout button and be removed from the login button.
If the login button is clicked again, the class should switch back to the login button from the logout button.
Below is the implementation:
angular.module('app', ['ui.router']).directive('tm', function() {
return {
restrict: 'E',
templateUrl: 'login.html',
scope: {
login: "&",
logout: '&'
},
controller: 'f',
controllerAs: 'vm'
};
})
You can view the full code at the following link: http://plnkr.co/edit/Q1e8u0okOa4looLcb2YO?p=preview