JSFiddle - React, Tailwind, and code Playground

by Lune Yu

HTML

<div ng-app="myApp">
  <div ng-controller="MainController">
    <my-input type="number" name="valueNumber1" ng-model="valueNumber1" label="Age" ng-change="change(this)" ng-click="click(this)"></my-input>
    <div id="result">a</div>
  </div>
</div>

JavaScript

var app = angular.module("myApp", []);

app.controller('MainController', function($scope, $window){
	$scope.valueNumber1 = 10;
  $scope.change = function(obj) {
    document.getElementById("result").innerHTML = ('change()' + $scope.valueNumber1);
  };
  $scope.click = function(obj) {
    document.getElementById("result").innerHTML = ('click()' + $scope.valueNumber1);
  };
});

app.directive('myInput', function() {
        return {
            require:  '^ngModel',
            restrict: 'EA',
            scope: {
                ngModel: '=',
                name: '@name',
                label: '@label'
            },
            replace: true,
            transclude: true,
            priority: 10,
            template: '<div class="cbay-input-div">' +
            '<label for="{{ name }}">{{label}}</label>' +
            '<input id="{{ name }}" ng-model="ngModel" />' +
            '</div>',
            compile: function(tElement, tAttrs, transclude) {
                console.log(tAttrs);
                var tInput = tElement.find('input');
                // Move the attributed given to 'custom-input' to the real input field
                angular.forEach(tAttrs, function(value, key) {
                    //console.log(key + " = " + value);
                    if (key.charAt(0) == '$' || key == "class")
                        return;
                    tInput.attr(key, value);
                    tInput.parent().removeAttr(key);
                });
                tElement.removeAttr('ng-model');
                return;
            }
        };
    })