JSFiddle - React, Tailwind, and code Playground

by kingliam

HTML

<div ng-controller="controller">
    <div ng-repeat='template in inner'>
        <div ng-switch on="template">
            <div ng-switch-when="photos">
                <photos>This is {{name}}</photos>
            </div>
            <div ng-switch-when="ancestor">
                <ancestor></ancestor>                
            </div>
        </div>
    </div>

CSS

photos { display: block; border: 1px solid red; }
ancestor { display: block; border: 1px solid blue; }

JavaScript

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

function controller($scope) {
    //$scope.inner = JSON.parse('{ "type": "photos", "type": "photos", "type": "ancestor" }');
    $scope.inner = ["photos", "ancestor", "ancestor", "photos"];
}

myApp.directive('photos', function () {
    return {
        restrict: 'E',
        //template: '<div>PHOTOS AREA</div>',
        controller: function ($scope) {
           $scope.name = "aaron";
    }        
    }
});

myApp.directive('ancestor', function () {
    return {
        restrict: 'E',
        template: '<div>ANCESTOR AREA</div>'
        
    }
});