AngularJS | Custom directives

AngularJS custom directives, more details www.shanidkv.com

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="panel panel-default">
  <div class="panel-body">
    <h2>Directive</h2>
    <example-directive panel-title="Panel Title" panel-body="Panel Body"></example-directive>
  </div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.directive('exampleDirective', function() {
    return {
        restrict: 'E',
        scope:{
        	panelTitle: '@',
          panelBody: '@',
        },
        template: '<div class="panel panel-default"><div class="panel-heading">{{panelTitle}}</div><div class="panel-body">{{panelBody}}</div></div>',
        replace: true,
        link: function(scope, elm, attrs) {
        	alert('link');
        	elm.on('click', function(){
          	alert('Hi');
          })
        }
    };
});