JSFiddle - React, Tailwind, and code Playground

angular directive to switch template based on observe of attr

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.8/angular-sanitize.min.js"></script>
<div ng-app="drew" class="container">
  <a class="collapsed btn panel panel-body btn-block" ng-click="toggleme()">
    <div><span class="fa animated" ng-class="{'fa-angle-up fadeInUp': !isExpanded, 'fa-angle-down fadeInDown': isExpanded}"></span></div>
    <div class="clear"></div>
    <div class="panel-collapse collapse animated" ng-class="{'in fadeInDown': isExpanded}" role="tabpanel">
      <div class="panel-body" ng-show="!armed">
        STUFF HERE
      </div>
      <div class="panel-body" ng-show="armed">
        You Need to Login First
      </div>
    </div>
  </a>

  <nav>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <loggedbtn lg="{{armed}}" class="btn btn-lg btn-default"></loggedbtn>
    </div>

    <div class="col-lg-3 col-md-4 col-xs-6">
      <button ng-disabled="armed" class="btn btn-lg btn-info" title="{{armed ? 'please Log in':'Hey' }}">
        SAVE PDF
      </button>
    </div>
    <div class="col-lg-3  col-md-4 col-xs-6"> - </div>
    <div class="col-lg-3  col-md-4 col-xs-6"> - </div>
    <div class="col-lg-3 col-md-4 col-xs-6"> - </div>
    <div class="col-lg-3 col-md-4 col-xs-6"  ng-bind-html="andrew"> {{andrew}} </div>


  </nav>

  <hr>Because this is set to <span class="badge text-info">{{armed}}</span> we are logged <span class="text-warning">{{lgstatus}}</span>
  <div ng-hide="armed" class="panel panel-default panel-body">
    SEEING ME AS WE ARE LOGGED IN
  </div>
</div>

JavaScript

var app = angular.module("drew", ['ngSanitize']);
app.directive('loggedbtn', function($compile, $timeout) {
  var template1 = '<logoutbutton  ng-click="armed=true">Log out</logoutbutton>';
  var template2 = '<a ng-href   ng-click="openAside("top","/tpl/asideSignup", "", "lg");">Log in</a>';
  var getTemplate = function(contentType) {
    var template = '';
    // IF ARMED IS TRUE WE NEED TO LOGIN / ELSE FALSE WE NEED TO LOG OUT
    switch (contentType) {
      case 'false':
        template = template1;
        break;
      case 'true':
        template = template2;
        break;
    }

    return template;
  };
  var cntrlfn = function($scope) {
    $scope.toggleme = function() {
      $scope.isExpanded = !$scope.isExpanded;
    };
    $scope.armed = true;
    $timeout(function() {
      $scope.armed = false;
    }, 2000)

  };
  var linker = function(scope, element, attrs) {
    attrs.$observe('lg', function(newValue) {
      //alert(newValue)
      scope.andrews = ['<logoutbutton  ng-click="armed=true">Logout</logoutbutton>', 'home.html'];
      scope.andrew = (newValue === 'true' ? scope.andrews[0] : scope.andrews[1]);
      scope.lgstatus = (newValue === 'true' ? "OUT" : "IN");
      element.html(getTemplate(newValue));
      //element.html(getTemplate(attrs.lg)); // taken from the attribute value
      $compile(element.contents())(scope);
    });
  };

  return {
    restrict: "EA",
    replace: true,
    link: linker,
    controller: cntrlfn,
    //scope: {lg:'@' }
  };
});