JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="http://angular-ui.github.com/angular-ui/build/angular-ui.js"></script>
<script src="http://www.malsup.com/jquery/block/jquery.blockUI.js"></script>
<div ng-app="app">
    <div ng-view></div>

    <script type="text/ng-template" id="myTemplate.html">
        <section ui-block="loading" block-whole-page>
            <h3>Modal Demo</h3>
            
            <pre>myHeaderData: {{myHeaderData}}</pre>
            
            <table id="myItems" class="table table-condensed table-striped">
                <thead>
                    <tr><th>Id</th><th>Link</th></tr>
                </thead>
                <tbody>
                    <tr ng-repeat="myItem in myList">
                        <td>
                            myItem: {{myItem}}
                        </td>
                        <td>
                            <a href="/phaas/VmKvU/show//myHeader/{{myHeaderData.id}}?myItemId={{myItem.id}}">{{myItem.name}}</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>

        <div id="myModal" ui-linkable-modal="myItemId" class="modal hide" ui-block="loading" ng-controller="MyItemCtrl">
          <div class="modal-header">
            <button type="button" class="close" data-toggle="modal" href="#myModal">&times;</button>
            <h3>Modal header</h3>
          </div>
          <div class="modal-body">
            <p>myItem: {{myItem}}</p>
          </div>
          <div class="modal-footer">
            <a class="btn" data-toggle="modal" data-toggle="modal" href="#myModal">Cancel</a>
     ...

JavaScript

var app = angular.module('app', ['ui'], function($routeProvider, $locationProvider) {
    $routeProvider.when('/phaas/VmKvU/show/myHeader/:myHeaderId', {
        controller: MyCtrl,
        templateUrl: 'myTemplate.html',
        reloadOnSearch: false
    }).otherwise({
        redirectTo: '/phaas/VmKvU/show/myHeader/CR001'
    });
    
            $locationProvider.html5Mode(true);

});

var version = 0; // DEMO counts number of data loads

function MyCtrl($scope, $location, $routeParams, $fakeHttp, $q) {    
    $scope.$on('myItemSaved', loadData);
    loadData();
    
    function loadData() {
        $scope.loading = true;
        $fakeHttp.get({
            myHeaderData: {
                id: $routeParams.myHeaderId,
                foo: 'bar',
                baz: 123.45,
                version: version++
            },
            myList: [{
                id: 'ID123',
                name: 'Item 1'
            }, {
                id: 'ID456',
                name: 'Item 2'
            }]
        }).then(function(data) {
            $scope.myHeaderData = data.myHeaderData;
            $scope.myList = data.myList;
            $scope.loading = false;
        }, function(error) {
            // TODO: HTTP error handling
            $scope.loading = false;
        });
    }
    
    $scope.$on('myItemSaved', function() {
        $location.search('myItemId', null);
    });
}

function MyItemCtrl($scope, $routeParams, $fakeHttp, $location) {
    var dirty = true;
    
    $scope.saveMyItem = saveMyItem;
    
    $scope.$on('modalHiding', cancelMyItem);
    $scope.$on('modalShowing', loadMyItem);
    
    function loadMyItem() {
        // make HTTP call here, set myItem to result
        //$scope.myItem = $http.get...
        $scope.loading = true;
        $scope.myItem = $fakeHttp.get({
            id: $routeParams.myItemId,
            foo: 'bar',
            detail: 123.45,
        }).then(function(myItem) {
            $scope.myItem = myItem;
           ...