JSFiddle - React, Tailwind, and code Playground

by fooby12

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<div ng-app="bindApp" ng-controller="bindToViewCtrl">
    <form name="bindForm">
        <label> Zip Code
            <input type="text" ng-pattern="zip" required ng-model="formData.zip" bind-to-view="formData.bindToView" name="zipCode"/>
        </label>
        <span>$scope.formData.zip: {{formData.zip}}</span>
        <br/>
        <button ng-click="formData.bindToView = !formData.bindToView">
            Bind to View is {{formData.bindToView ? 'On' : 'Off' }}
        </button> 
    </form>
</div>

CSS

label {
  display: block;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.ng-valid.ng-dirty {
  background-color: #78FA89;
}

input.ng-invalid.ng-dirty {
  background-color: #FA787E;
}

JavaScript

angular.module('bindApp', []).
controller('bindToViewCtrl', function($scope) {
    $scope.zip = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
    $scope.formData = {
        zip: '1234',
        bindToView: true
    };
}).
directive('bindToView', function($log) {
    return {
        require: 'ngModel',
        scope: {bindToViewIsOn: '&bindToView', ngModel: '='},
        // Following Example
        // http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController 
        link: function (scope, iElem, iAttr, ngModel) {
            if(!ngModel) return;    
            
            ngModel.$render = function() {
                $log.debug("--Rendering--");
                $log.debug("$viewValue:", ngModel.$viewValue);
                $log.debug("$modelValue:", ngModel.$modelValue);
                
                iElem[0].value = ngModel.$viewValue || ngModel.$modelValue;  
            };
            
            iElem.on('blur keyup change', function() {
                scope.$apply(updateModel);
            });
            
            scope.$watch(function() { return scope.bindToViewIsOn(); }, function() {
                updateModel();
            });
            
            function updateModel(){
                $log.debug("--Updating--");
                if(scope.bindToViewIsOn()){

                    scope.ngModel = iElem[0].value;
                    
                    $log.debug("$viewValue:", ngModel.$viewValue);
                    $log.debug("$modelValue:", ngModel.$modelValue);
                    $log.debug("Element Val:", iElem[0].value);
                    $log.debug("Scope Val:", scope.ngModel);
                }
            }
        }
    };
});