JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<div ng-app="recordApp">
<recording-process>
 </recording-process>
</div>

JavaScript

angular.module('recordApp', [])
.directive('recordingProcess', recordingProcess)
.directive('timer', timer);


function recordingProcess() {
  var recordingCtrl = function() {
    var record = this;
    Object.assign(record, {
      stopRecording: function() {
        console.log('You stopped me');
      }
    });
  };
  
  return {
    restrict: 'E',
    template: '<p><timer on-stop="record.stopRecording()"></timer></p>',
    controller: recordingCtrl,
    controllerAs: 'record',
    bindToController: {},
    scope: true
  };
}

function timer() {
  var timerCtrl = function($scope, $element, $attrs) {
    var timers = this;
    /*Object.assign(timers, {
    	stopProcess: function(process) {
        element.$on('click', process);
      }
    });*/
  };
  
  return {
    restrict: 'E',
    template: '<button ng-click="timers.onStop()">click</button>',
    controller: timerCtrl,
    controllerAs: 'timers',
    bindToController: {
    	onStop: '&'
    },
    scope: true
  };
}