JSFiddle - React, Tailwind, and code Playground

by jwanga

HTML

<div ng-app="app">
    <a href="#/?id=1">one</a>
    <a href="#/?id=2">two</a>
    
    <div ng-view></div>
    
    <script type="text/ng-template" id="view.html">
        <div ng-controller="controller">
            <div class="1" ng-show="id == 1">
                <h1>One</h1>
                <chat></chat>
            </div>
            <div class="2" ng-show="id == 2">
                <h1>Two</h1>
                <chat></chat>
            </div>
        </div>
    </script>
    <script type="text/ng-template" id="chat.html">
        <div>
            <input ng-model="text" type="text"></input>
            <button ng-click="submit(text)">Submit</button>
            <div ng-repeat="item in items">{{item}}</div>
        </div>
    </script>  
</div>

JavaScript

angular.module('app',[]).config(function($routeProvider){

    $routeProvider.when('/', {templateUrl: 'view.html', reloadOnSearch:false});

}).controller('controller', function($scope, $routeParams){
    $scope.$on('$routeUpdate', function(value) {
        $scope.id =   $routeParams.id;
    }); 
}).directive('chat', function(){
    return{
        restrict:'E',
        replace:true,
        scope:{},
        controller: function($scope){
            $scope.items = [];
            $scope.submit = function(text){
                $scope.items.push(text);
            };
        },
        templateUrl:'chat.html'
    }
});