JSFiddle - React, Tailwind, and code Playground

by Shaun Scovil

HTML

<div ng-app="myApp">
  <div setup ng-controller="TestController">
    <button ng-click="run()">
      Run Test
    </button>
    <ul>
      <li ng-repeat="result in getResults() track by $index">
        {{ result }}
      </li>
    </ul>
  </div>
</div>

JavaScript

angular.module('myApp', [])
  .controller('TestController', TestController)
  .directive('setup', setupDirective)
  .factory('$results', resultsServiceFactory)
;

function TestController($scope, $results) {
	$scope.getResults = $results.get;
  $scope.run = function() {
  	$scope.test = 'A';
    $scope.$emit('test');
  };
}

function setupDirective($rootScope, $results) {
	return function postLink(scope) {
  	scope.$watch(function () {
    	return scope.test;
    }, function (value) {
    	if (!angular.isUndefined(value)) {
	    	$results.add('Watch callback ' + scope.test);
        scope.$emit('test');
      	scope.test = 'B';
      }
    });
  	scope.$on('test', function () {
    	$results.add('Event listener (scope) ' + scope.test);
    });
    $rootScope.$on('test', function () {
    	$results.add('Event listener (rootScope) ' + scope.test);
    });
  };
}

function resultsServiceFactory() {
	var results = [];
  
  return {
    add: function(result) {
    	results.push(result);
    },
  	get: function() {
    	return results;
    }
  };
}