JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<section ng-app="app" ng-controller="FormCtrl">
    <button ng-click="show=true">Show Input</button>
    <section ng-if="show">
        <form ng-submit="submit()">
            <div>Focus the field and press enter to trigger the form default action</div>
            <input type="text" my-directive='' ng-model='foo'></input>{{foo}}</form>
    </section>
</section>

JavaScript

var module = angular.module('app', []);
module.controller('FormCtrl', function ($scope) {
    $scope.show = true;
    $scope.submit = function () {
        $scope.show = false;
    }
});

module.directive('myDirective', function () {
    return {
        link: function (scope, element, attr, ctrl) {
            element.on('blur', function () {
                console.log('input blurred');
            });
            scope.$on('$destroy', function () {
                console.log('$destroy the directive');
                // manipulate the dom (add/remove parents) in some way that
                // removes focus from the element and triggers the blur event
                element.trigger('blur');
                console.log('done blurring');
            });

        }
    }

});