JSFiddle - React, Tailwind, and code Playground

by matmuchrapna

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://ci.angularjs.org/job/angular.js-angular-master/232/artifact/build/pkg/0.10.7-64912069/angular-0.10.7-64912069.js"></script>
<div ng-app>

    <script type="text/ng-template" id="foo">
        <div ng:controller="FooCtrl">
            <p>Foo: {{title()}}</p>
        </div>
    </script>

    <script type="text/ng-template" id="bar">
        <div ng:controller="BarCtrl">
            <p>Bar: {{title()}}</p>
        </div>
    </script>

    <div ng:controller="DashboardCtrl">
        <!--<ng:include src="charts[0].template" scope="charts[0].scope"/>-->
        <div ng:repeat="chart in charts">
            <ng:include src="chart.template" scope="chart.scope"></ng:include>
        </div>
            
    </div>

</div>

JavaScript

function DashboardCtrl($scope) {
    $scope.newScope = function(label) {
        var ctrl = $scope.$new();
        ctrl.label = label;
        return ctrl;
    };
    $scope.charts = [ 
        { template : 'foo', scope : $scope.newScope('f-1') },
        { template : 'foo', scope : $scope.newScope('f-2') },
        { template : 'bar', scope : $scope.newScope('b-1') }
    ];
}
function FooCtrl($scope) {
    $scope.title = function() { 
        return '(' + $scope.label + ')';
    };
}
function BarCtrl($scope) {
    $scope.title = function() {
        return '[' + $scope.label + ']';
    };
}