Duplicate Angular directive

by Julien Roche

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.js"></script>
<body>
  <my-directive></my-directive>
  <my-duplicate-directive></my-duplicate-directive>
</body>

CSS

my-directive {
  background-color: yellow;
  border: 1px solid black;
  color: black;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  text-align: center;
  width: 300px;
}

my-duplicate-directive {
  background-color: purple;
  border: 1px solid black;
  color: black;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  text-align: center;
  width: 300px;
}

JavaScript

var myApp = angular.module('myApp', [])
  .directive('myDirective', function () {
  	return {
    	'restrict': 'E',
      'template': '<button ng-click="vm.onclick()">Reload page</button>',
      'scope': { },
      'controller': function () {
      	this.onclick = function () {
        	alert('Clicked !!');
        };
      },
      'controllerAs': 'vm',
      'bindToController': true
    };
  })
  .decorator('myDirectiveDirective', function ($delegate) {
  	var myDuplicateDirective = angular.copy($delegate[0]);
    
    myDuplicateDirective.name = 'myDuplicateDirective';
    myDuplicateDirective.require = 'myDuplicateDirective';
    myDuplicateDirective.controller = function () {
      this.onclick = function () {
        alert('Extended Clicked !!');
      };
    };
    
    console.log(myDuplicateDirective);
    
  	return [myDuplicateDirective];
  });
  
  angular.bootstrap(document.body, ['myApp']);