Compiled Directive with Table

Compiled Directive

by Rishabh Sharma

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<div ng-controller="AppController">
  <add num="num" multiply="multiply(multiplier)"></add>
  <app-directive num="num" multiply="multiply(multiplier)"></app-directive>
</div>

CSS

.app-directive {
  border: 1px solid darkgray;
  padding: 5px;
  background: lightblue;
}

JavaScript

angular.module('app', [])
.controller('AppController', AppController)
.directive('appDirective', appDirective)
.directive('add', add)

function AppController($scope) {
	$scope.num = 1;
  $scope.multiply = function(multiplier) {
		multiplier = multiplier || 1;
  	$scope.num *= multiplier;
  }
}

function appDirective() {
	var directive = {
  	restrict: 'E',
    replace: true,
    scope: {
    	num: '=',
      multiply: '&'
    },
    template: '<div class="app-directive">Enter Multiplier: <input type="text" ng-model="mValue"></input><button ng-click="multiply({multiplier: mValue})">Multiply</button> num: {{num}}</div>'
  }
  return directive;
}

function add($compile) {
	var directive = {
  	restrict: 'E',
    replace: true,
    scope: {
    	num: '=',
      multiply: '&'
    },
    template: '<button ng-click="add()">ADD</button>',
    controller: function($scope, $element) {
    
    	$scope.add = function() {
      	console.log('called');
      	var childScope = $scope.$new(),
        compiledDirective = $compile('<app-directive num="num" multiply="multiply(multiplier)"></app-directive>'),
        directiveElement = compiledDirective(childScope);
        $element.parent().append(directiveElement);
      }
      
    }
  }
  return directive;
}