JSFiddle - React, Tailwind, and code Playground

directive attr $set with template

by Andrew Pougher

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-controller="cntrl">
  <div switchloginbtn ng-init="disarm = true"></div>
    <div logout></div>
    
</div>

JavaScript

var app = angular.module('app', []);

app.controller('cntrl', function($scope){
$scope.doit = function(){
alert("asdasdasdasd")
}
});

/*
app.directive('logout', function() {
  return {
    restrict: 'AE',
    replace: true,
template: '<span class="{{cls}} btn btn-xs btn-default btn-block">{{logoutmsg}}</span>',
       // YOU ARE LOGGED IN SO SHOW LOG OUT UI
    link: function(scope, elem, attrs) {
   // initial setup
scope.disarm == true ? scope.logoutmsg = "Login" : scope.logoutmsg = "Log out";

      elem.bind('click', function() {
         if(scope.disarm == true){
    alert("Y");
   scope.$apply(function() {
    scope.disarm = false;
    scope.logoutmsg = "Login"
     scope.cls = "btn-danger ";
    })
    }else{
       alert("N");

          scope.$apply(function() {
       scope.disarm = true;
       scope.logoutmsg = "Log out"
         scope.cls = "btn-info ";
         
    })
    }
      });
      elem.bind('mouseover', function() {
        elem.css('cursor', 'pointer');
  
      });
    }
  };
});
*/




app.directive('switchloginbtn', function(){
var link = function(scope, elem, attrs){
     // initial setup
//scope.disarm == true ? scope.btnwords = "Log out" : scope.btnwords = "Logdasd out";
  scope.showMessage = function(){
     if(scope.disarm == true){
     	scope.disarm = false;
     	scope.btnwords = "Log out buddy"; // 
			attrs.$set('title','Log out');
       scope.cls = "btn-danger "; // class
      //scope.color = "red";
      console.log(scope.disarm)
	}else{
       scope.disarm = true; // set log out to true
       scope.btnwords = "Log in"; // now log in
       attrs.$set('title','Log in to get full access to features');
			scope.cls = "btn-info "; // class
       window.localStorage.removeItem("BoMem"); localStorage.removeItem("BoMem"); // kill LS
       console.log(scope.disarm)
      }
    } 
  };
  return{
    link: link,
    template: "<button class='{{cls}} btn btn-xs' ng-click='showMessage()'>{{btnwords || 'Logins'}}...