JSFiddle - React, Tailwind, and code Playground

by provegard

HTML

<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
<div ng-init="ctx={state:{}}">
  <pre>{{ctx.state.SomeProp}}</pre>
  <input type="text" ng-model="ctx.state.SomeProp">
  <ax-input model="ctx.state.SomeProp"></ax-input>
</div>

CSS

.wrapper {
  padding: 5px;
  background-color: yellow;
}

JavaScript

angular
  .module("myApp", [])
  .directive("splField", function () {
  	return {
    	require: "ngModel",
      link: function (s, e, a) {
        console.log("ngModel attribute value = " + a.ngModel);
        console.log("splField attribute value = " + a.splField);
      }
    };
  })
  .directive("axInput", function () {
  	return {
    	template: '<div class="wrapper"><input spl-field="{{splFieldVal}}" ng-model="modVal" type="text"></div>',
      scope: {
        stringVal: "@model",
        modVal: "=model"
      },
      compile: function () {
        return {
          pre: function (s, e, a) {
            s.splFieldVal = s.stringVal.replace(/^ctx\.state\./, "");
          }
        }
      }
      /*link: function (s, e, a) {
        s.splFieldVal = s.stringVal.replace(/^ctx\.state\./, "");
      }*/
    };
  })
	;