JSFiddle - React, Tailwind, and code Playground

by asgoth

HTML

<DIV ng-app="miniapp">
  <DIV ng-controller="Ctrl">
    <form class="dir" execute="someFunction">
      <input type="text" class="some-class">
    </form>
  </DIV>
</DIV>

JavaScript

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

function Ctrl($scope) {
  $scope.someValue = "ABC";
  $scope.fieldValue = "";
  $scope.someFunction = function (value) {
    console.log(value);
  };
}

app.directive('dir', function () {
  return {
    restrict: 'C',
    scope: {
      execute: '='
    },
    controller: function ($scope) {
      this.execute = $scope.execute;
    }
  };
});

app.directive('someClass', function () {
  return {
    restrict: 'C',
    require: '^dir',
    replace: true,
    template: '<INPUT name="foo" id="bar" type="text" ng-model="fieldValue" >',
    scope: {
      fieldValue: '@'
    },
    link: function (scope, elm, attrs, ctrl) {
      var monitorField = function (newValue, oldValue) {
        if (newValue) {
           ctrl.execute(newValue);
        }
      };
      scope.$watch("fieldValue", monitorField, true);
    }
  };
});