JSFiddle - React, Tailwind, and code Playground

by fredrik

HTML

<div data-ng-app="">
    <div data-ng-controller="BenderController">
        <button data-ng-click="loadOne()">One</button>
        <button data-ng-click="loadTwo()">Two</button>
    </div>
    <div id="modal" data-ng-controller="ModalController">
        <div data-ng-include src="path"></div>
    </div>


  <!-- template1.html -->
  <script type="text/ng-template" id="template1.html">
    Content of template1.html
      {{ n }}
      <div data-ng-controller="Ctrl" data-ng-init="parseN(n)">
      {{ nText }}
      </div>
  </script>
  
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }

JavaScript

var BenderController = function($scope) {
    $scope.loadOne = function () {
        var modal = document.getElementById('modal');
        var modalControllerScope = angular.element(modal).scope();
        modalControllerScope.loadModal('template1.html', 1);
    }
        
    $scope.loadTwo = function () {
        var modal = document.getElementById('modal');
        var modalControllerScope = angular.element(modal).scope();
        modalControllerScope.loadModal('template1.html', 2);
    }
}
        
var ModalController = function ($scope) {

    $scope.loadModal = function (path, n) {
        $scope.path = path;
        $scope.n = n;            
    }
}
        
var Ctrl = function ($scope) {
    $scope.parseN = function (n) {
        $scope.nText = 'text: ' + n;
    }                
}