Angular - Dynamic Controls/Directives

This fiddle shows how to dynamically display controls or directives.

by douglasloyo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="homeController">
      
      <h3>Dynamic Controls</h3>

      <div ng-repeat="w in widgets">
           <div ng-if="w=='control1'">
              <div control1></div>
            </div>
            <div ng-if="w=='control2'">
              <div control2></div>
            </div>
            <div ng-if="w=='control3'">
              <div control3></div>
            </div>
      </div>
  </div>
</div>

CSS

table{
  border:1px solid black;
}
td{
  border:1px solid black;
}

JavaScript

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

myApp.controller('homeController', function ($scope) {
	//$scope.hello = "Hi!";
  //$scope.widgets = ["control1","control2", "control3"];
  //$scope.widgets = ["control2","control1", "control3"];
  $scope.widgets = ["control3","control2"];
  
});

myApp.directive('control1', function() {
  return {
    template: '<b>CCControl 1</b>'
  };
});
myApp.directive('control2', function() {
  return {
    template: '<table><tr><td>Control 2</td><td>b</td><td>c</td></tr></table>'
  };
});
myApp.directive('control3', function() {
  return {
    template: '<b>Control 3 - Other widget</b>'
  };
});