JSFiddle - React, Tailwind, and code Playground

by Feyyaz Akkuş

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.js"></script>
<div ng-repeat="sp in obj.PEs">
  <div draw-pe pe-obj="sp" proc="{{sp.peId}}"></div>
</div>

<div style="border:1px;" ui-view="properties"></div>

JavaScript

var myApp = angular.module('myApp', ["ui.router"]);
myApp.controller("testCtrl", function($scope, $rootScope) {
  $rootScope.obj = {
    "PEs": {
      "1": {
        "peId": "1",
        "peName": "Exp1",
        "peDisplayName": "Exp",
        "peType": "Exp",
        "peCategory": "PE"
      },
      "2": {
        "peId": "2",
        "peName": "RN1",
        "peDisplayName": "RNull",
        "peType": "RN",
        "peCategory": "PE"
      }
    }
  }
})

myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('Exp', {
      url: '/Exp/:peId',
      views: {
        "properties": {
          template: ".<h3>I am Exp ! </h3>",
          controller: function($scope, $stateParams) {
            var peId = $stateParams.peId;
            alert("Peid-> " + angular.toJson($scope.obj.PEs[peId]));

          }
        }
      }
    })
    .state('RN', {
      url: '/RN/:peId',
      views: {
        "properties": {
          template: "<h3> I am RN ! </h3>",
          controller: function($scope, $stateParams) {
            var peId = $stateParams.peId;
            alert("Peid-> " + angular.toJson($scope.obj.PEs[peId]));
          }
        }
      }
    })
});
myApp.directive("drawPe", function($compile) {

  return {
    restrict: "AE",
    tranclude: true,
    scope: {
      peObj: '='
    },
    template: '<a href="" ui-sref="{{peObj.peType}} ({peId: peObj.peId})"> <h5>{{peObj.peDisplayName}}</h5></a>',
    link: function(scope, element, attrs) {
      console.log(scope.peObj);
      scope.$watch(
        function(scope) {
          // watch the 'compile' expression for changes
          return scope.$eval(attrs.compile);
        },
        function(value) {
          $compile(element.contents())(scope);
        }
      );
    }
  }
});