JSFiddle - React, Tailwind, and code Playground

by floor_

HTML

<div ng-app="testApp">
    <div ng-controller="testCtrl as ctl">
      {{ctl.testing}} {{ctl.disabledY}}
      <button ng-click="ctl.toggleDisabled();">Toggle Disabled</button>
      <fw-error-display></fw-error-display>
      <div fw-disabled fw-is-disabled={{ctl.disabledY}}>
        <button>
        hey
        </button>
      </div>
      <button fw-disable="ctl.disabledY">T1</button>
    </div>
 </div>

CSS

.errorMessage{
  color: white;
  background-color: #790F1B;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
  text-shadow: 2px 2px 2px #000000
}

JavaScript

angular.module('testApp', []);
    
angular.module("testApp").controller("testCtrl",
	["$scope",
  	function($scope) {
  		var self = this;
      self.error = true;
      self.testMessage = "Error Error Error Error";
      self.disabledY = true;
      console.log("ctrl loaded");
      function toggleDisabled() {
      	self.disabledY = !self.disabledY;
      }
      angular.extend(self, {
      	testing: 'Test is working',
        toggleDisabled: toggleDisabled,
      });
    }
 	]
);

/**
 * @ngdoc directive
 * @name fw.tt.ui:fwErrorDisplay
 *
 * @description
 * To display an offline error message
 *
 */

angular.module('testApp').directive('fwErrorDisplay', [
  function() {
    'use strict';
    
    return {
      restrict    : 'E',
      scope : {
        fwErrorMessage: '=?'
      },
      template : '<div class="errorMessage">{{fwErrorMessage}}</div>',
      link : function($scope, $el) {
      	console.log("error message directive");
				if($scope.fwErrorMessage === undefined) {
        	$scope.fwErrorMessage = "YOU'RE CURRENTLY OFFLINE - PLEASE RECONNECT";
        }
      }
    };
  }]);


angular.module('testApp').directive('fwDisable', [
  function() {
    'use strict';
    
    return {
      restrict    : 'A',
      link : function(scope, element, attributes) {
      	console.log('activated');
        scope.$watch(attributes.fwDisable, function(isDisabled){
          if(isDisabled) {
            element.attr("disabled", "disabled");
          } else {
           	element.removeAttr("disabled");
          }
        });
      }
    };
 }]);
 
 angular.module('testApp').directive("inputDisabled", function(){
  return function(scope, element, attrs) {
  	console.log('test est st');
    scope.$watch(attrs.inputDisabled, function(val){
      if(val)
        element.removeAttr("disabled");
      else
        element.attr("disabled", "disabled");
    });
  }
});