JSFiddle - React, Tailwind, and code Playground

by prometh

HTML

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<div ng-app="bb">

  <bb-input
    class="bb width-1-2 grid cell"
    label="Name on Card"
    name="creditcard_name"
    required
    type="text"
  ></bb-input>

</div>

CSS

.bb.focused.type-text.input2 .-field {
  border-color: red;
  outline: none;
}

JavaScript

(function() {
  'use strict';
  
  var template = 
 `<label
  class="bb type-{{type}} input2"
  ng-class="{
    checked: checked,
    disabled: disabled,
    empty: empty,
    focused: focused,
    invalid: invalid,
    valid: valid
  }"
>
  
  <span
    class="bb compactly horizontally padded , unwrapped , stretched grid row"
    ng-if="type==='checkbox' || type==='radio'"
  >
    <span class="bb solid grid cell">
      <input
        class="-field"
        name="{{name}}"
        ng-model="value"
        type="{{type}}"
      >
    </span>
    <span class="bb fluid grid cell"><span class="-label">{{label}}</span></span>
  </span>

  <span
    class="bb block container"
    ng-if="type!=='checkbox' && type!=='radio'"
  >
    <span class="-label">{{label}}</span>

    <input
      class="-field"
      type="{{type}}"
      name="{{name}}"
      ng-if="type!=='select' && type!=='textarea'"
      ng-model="value"
    >

    <select
      class="-field"
      name="{{name}}"
      ng-if="type === 'select'"
      ng-model="value"
    >
      <option value="" disabled></option>
    </select>

    <textarea
      class="-field"
      name="{{name}}"
      ng-if="type === 'textarea'"
      ng-model="value"
    ></textarea>
  </span>

</label>`;

  angular
    .module('bb', [])
    //.controller('InputController', ['$scope', InputController])
    .directive('bbInput', bbInput);

  function bbInput() {
    return {
      //bindToController: true,
      //controller: 'InputController',
      link: link,
      restrict: 'E',
      scope: {
        label: '@',
        name: '@',
        type: '@',
        value: '='
      },
      template: template
    };

    function link(scope, element, attrs, ctrl) {
    
    	// THIS SHOULD NOT BE NECESSARY
      setTimeout( function() {

        /*ctrl.$viewChangeListeners.push( function() {
          console.log( "ngModel value changed (B):", ctrl.$viewValue );
        });*/
          
				element.find('.-field')
         ...