JSFiddle - React, Tailwind, and code Playground

by tech_no_logical

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div ng-app="myApp">
    
  <script type="text/ng-template" id="my-directive.html">
    <div>
        <button>click</button>
        <input type="text" />
        <span>{{name}}</span>        
    </div>
  </script>

  <div ng-controller="myCtrl">

    <form novalidate>

        <my-directive required ng-model="myModel.file1"></my-directive>
            
    </form>
    
    Form : {{myModel}}
    
  </div>
</div>

JavaScript

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


myApp.controller("myCtrl", function($scope) {
    $scope.myModel = {};
});

myApp.directive('myDirective', [function() {
    return {
        templateUrl: 'my-directive.html',
        replace: true,
        restrict: 'E',
        require: 'ngModel',
        scope: true,

        link: function(scope, elm, attrs, ctrl) {

            $('button', elm).click(function() {
                scope.name = $('input', $(this).parent()).attr('value');
                scope.$apply(function() {
                    ctrl.$setViewValue(scope.name);
                });
            });

            ctrl.$render = function() {
                console.log('render', ctrl.$viewValue);
            }

            ctrl.$parsers.unshift(function(val) {
                console.log('validating ', val);
                if (val == 'foo') {
                    ctrl.$setValidity('my-directive', true);
                    //ctrl.$render();
                    return val;
                } else {
                    ctrl.$setValidity('my-directive', false);
                    //ctrl.$render();                
                    return undefined;
                }
            })

        }
    }}]);