JSFiddle - React, Tailwind, and code Playground

by st3fan

HTML

<div ng-app="demoApp">

    <div ng-controller="ItemListCtrl">

        <h1>{{heading}}</h1>
        <ul ng-repeat="item in items">
            <li>{{item.name}}</li>
        </ul>

    </div>
    
    <div ng-controller="BroadcastCtrl">
        <button ng-click="broadcastClick()">Broadcast</button>
    </div>
</div>

JavaScript

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

demoApp.controller('ItemListCtrl', function ($scope, $http) {

    $scope.heading = "Items";

    $scope.items = [
        { 'name': 'Item 1' },
        { 'name': 'Item 2' }
    ];
    
    $scope.$on('UpdateItems', function(event, args) {
        console.log(event.name, arguments); // DEBUG
        
        $http.get('/echo/json/', { 'data': 'request input' })
            .success(function(data, status, headers, config) {
                console.log('success', arguments); // DEBUG
                $scope.items.push({ 'name': 'Async item ' + ($scope.items.length + 1) });
            });
        
        $scope.items.push({ 'name': 'Item ' + ($scope.items.length + 1) });
    });
});

demoApp.controller('BroadcastCtrl', function ($scope, $rootScope) {

    $scope.broadcastClick = function() {
        console.log('broadcastClick', arguments); // DEBUG
        $rootScope.$broadcast('UpdateItems');
    };

});