JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<script src="https://code.angularjs.org/1.2.8/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div ng-controller="MijnController">
    <input data-on-change data-ng-model="tekst"/>
    <input data-on-change data-ng-model="tekst"/>
    <br>
    current tekst: {{tekst}}
    <br>        
    <ul id="loging">
        
    </ul>
    
</div>

CSS

#loging{
    border:1px solid gold;
    padding:5px;
}

JavaScript

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

app.directive('onChange', function() {    
    return {
        restrict: 'A',
        //scope:{'onChange':'=' },
        scope: '@',
        link: function(scope, elm, attrs) {            
            scope.$watch('onChange', function(nVal) { 
                elm.val(nVal); 
            });            
            elm.bind('keyup', function() {
                var currentValue = elm.val();                
                if( scope.onChange !== currentValue ) {
                    scope.$apply(function() {
                        scope.onChange = currentValue;
                    });
                    var loging = document.getElementById("loging");
                    loging.innerHTML +=  'keyup ' +currentValue + '<br>';                                             
                }
            }).bind('blur', function() {
                var currentValue = elm.val();                
                if( scope.onChange !== currentValue ) {
                    scope.$apply(function() {
                        scope.onChange = currentValue;
                    });
                    var loging = document.getElementById("loging");
                    loging.innerHTML +=  'blur ' +currentValue + '<br>';                                             
                }
            });

            
        }

    };        
});

app.controller('MijnController', function($scope) { 
    $scope.tekst = "i react on binding";
});