JSFiddle - React, Tailwind, and code Playground

by johnwun

HTML

<div ng-app="project">

    <div ng-controller="one">panic level: {{panic}}<br />
        <button ng-click='elevate()'>emergency!</button>
      <button ng-click='stabilize()'>stabilize!</button>
    </div>
    
    <div ng-controller="two">elevated temperature: {{alert}}</div>
</div>

JavaScript

angular.module('project', []).
service('CoreReactorChannel', function ($rootScope) {

    // local constants for the message ids.  
    // these are private implementation detail
    var ELEVATED_CORE_TEMPERATURE_MESSAGE = "elevatedCoreMessage";

    // publish elevatedCoreTemperature
    // note that the parameters are particular to the problem domain
    var elevatedCoreTemperature = function (core_id, temperature) {
        $rootScope.$broadcast(ELEVATED_CORE_TEMPERATURE_MESSAGE, {
            core_id: core_id,
            temperature: temperature
        });
    };

    // subscribe to elevatedCoreTemperature event.
    // note that you should require $scope first 
    // so that when the subscriber is destroyed you 
    // don't create a closure over it, and te scope can clean up. 
    var onElevatedCoreTemperature = function ($scope, handler) {
        $scope.$on(ELEVATED_CORE_TEMPERATURE_MESSAGE, function (event, message) {
            // note that the handler is passed the problem domain parameters 
            handler(message.core_id, message.temperature);
        });
    };

    // other CoreReactorChannel events would go here.

    return {
        elevatedCoreTemperature: elevatedCoreTemperature,
        onElevatedCoreTemperature: onElevatedCoreTemperature
    };
});

function one($scope, CoreReactorChannel) {
    $scope.panic = 'calm';
    $scope.elevate = function () {
        CoreReactorChannel.elevatedCoreTemperature(1, 200);
    };
    
    CoreReactorChannel.onElevatedCoreTemperature($scope,

    function (coreid, temperature) {
        $scope.panic = temperature > 100 ? "panic!" : "relief!";
    });
        $scope.stabilize = function () {
        CoreReactorChannel.elevatedCoreTemperature(2, 100);
    };
 
}

function two($scope, CoreReactorChannel) {
    $scope.alert = 'none';
    CoreReactorChannel.onElevatedCoreTemperature($scope,

    function (coreid, temperature) {
        $scope.alert = 'core temp is at ' + temperature;
    });
    
}