Adding directive dynamically

by Rishabh Sharma

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div class="container" ng-controller="MyCtrl as vm">
  <add text="Hello World!"></add>
</div>

CSS

.container {
  padding: 10px;
}

JavaScript

angular.module('myApp', [])

.controller('MyCtrl', function() {
  var vm = this;
})

.directive('add', function($compile) {
  var directive = {
    restrict: 'E',
    replace: true,
    scope: {
      text: '@'
    },
    template: '<p ng-click="add()">{{text}}</p>',
    controller: function($scope, $element) {
      $scope.add = function() {
        var el = $compile("<tbl data='n'><tbl>")($scope);
        $element.parent().append(el);
      }
    }
  };
  return directive;
})

.directive('tbl', function() {
  var directive = {
    restrict: 'E',
    replace: true,
    scope: {
      data: '='
    },
    template: '<table><tr><td>1</td><td>2</td><td>3</td></tr></table>'
  }
  return directive;
});