JSFiddle - React, Tailwind, and code Playground

by hescano

HTML

<div ng-app="myApp">
    <div ng-controller="myController as vm">
        <form>
            
            <save-button ng-click='vm.doSave()' my-save-function="vm.thisFormsSave"></save-button>
            <input type="text" value="{{ vm.text }}" ng-blur="vm.doSave()" />
        </form>
    </div>
</div>

JavaScript

(function(){
	'use strict';    
    angular
     	.module("myApp", [])
        .directive("saveButton", [function () {
         return {
             restrict: 'E',
             scope: {
             	mySaveFunction: "="
             },
             template: "<input type='button' value='Save' />",
             link: function(scope) {
                 //expose the method to the outside world     
                 //listen to the broadcast
				scope.$on("save-form", function () {
                    if(typeof scope.mySaveFunction === "function")
                    {
                        scope.mySaveFunction.call();
                    }
                });
   
             }
         }
     	}]);
    
    angular
    	.module("myApp")
    	.controller("myController", myController);
    
    //inject $scope to call $broadcast
    myController.$inject = ["$scope"];
    
    function myController($scope) {
        var vm = this;
        vm.text = "Save will be triggered on blur...";
        
        vm.doSave = function() {
            $scope.$broadcast("save-form");
        }
        
        vm.thisFormsSave = function() {
            alert("I save the way I want!");
        }
    }
})();