JSFiddle - React, Tailwind, and code Playground

by Silvestrs Kante

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.1/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<div ng-app="myApp">
  <div ng-controller="myCtrl as vm">
    <input form-validation-field valid-value="1" something="vm.inputValue" id="test" type="text" ng-model="vm.inputValue" />
    <button ng-click="vm.toggleFunction()">
      Toggle
    </button>
    <input ng-model="vm.inputValue"  id="test1"/>
    <button ng-click="vm.toggleFunction1()">
      Toggle
    </button>
  </div>
</div>

CSS

input {
  margin-top: 100px;
}

JavaScript

angular
  .module("myApp", ['ui.bootstrap'])
  .controller("myCtrl", function() {
    var vm = this;
    vm.inputValue = "thgis";
    vm.toggleFunction = function() {
      console.log(angular.element("#test").scope());
    }
    vm.toggleFunction1 = function() {
      console.log(angular.element("#test1").scope());
    }
  })
  .directive('formValidationField', formValidationField);

formValidationField.$inject = ['$compile'];

function formValidationField($compile) {
  var elementPlacehodler = null;

  var directive = {
    link: link,
    restrict: 'A',
    controller: function($scope) {
      var vm = this;
      vm.IsValid = true;
      vm.placeholderElemenet = null;
      vm.warningMessage = "asdsad" + Date.now().toString();
    },
    controllerAs: "formValidationFieldCtrl",
    bindToController: true,
    scope: {
      validValue: "@",
      something: "="
    }
  };
  return directive;

  function link(scope, element, attrs, formValidationFieldCtrl, transclude) {

      // Notes: remove directives to avoid infinite transclusion loop
      element.removeAttr("form-validation-field");
      element.removeAttr("data-form-validation-field");
      element.attr("ng-class", "{ 'warning':  formValidationFieldCtrl.IsValid}");
      element.attr("uib-tooltip", "{{ formValidationFieldCtrl.warningMessage }}");
      element.attr("tooltip-is-open", "{{ true }}");
      element.attr("tooltip-trigger", "none");
      element.addClass("form-validation-field");
      $compile(element)(scope);
      formValidationFieldCtrl.placeholderElemenet = clone;


    scope.$watch('formValidationFieldCtrl.IsValid', function(value) {
      console.log({
        Message: "watch IsValid",
        Value: value,
        Scope: scope
      });
      if (!!formValidationFieldCtrl.placeholderElemenet) {
        if (!!value) {
          formValidationFieldCtrl.placeholderElemenet.removeClass("warning");
        } else {
         ...