JSFiddle - React, Tailwind, and code Playground

by Rob Rothe

HTML

<div ng-app="testApp" ng-controller="SaveCtrl">
    <save-button></save-button>
    <hr>
    <save-button></save-button>
</div>

JavaScript

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

app.controller('SaveCtrl', function ($scope) {
    $scope.save = function () {
        $scope.$broadcast('saved');
    };
});

app.directive('saveButton', function () {
    return {
        restrict: 'E',
        template: '<div class="container"><button ng-click="save()">Save</button></div>',
        link: function (scope, element, attr) {
            scope.$on('saved', function () {
                alert('saved');
            });
        }
    }
});