Custom Directive in AngularJs

AngularJS directives are what controls the rendering of the HTML inside an AngularJS application. They can be an Html element, attribute, class or a comment. Directives are used to manipulate the DOM, attaching new behavior to HTML elements, data binding and many more.

Similarly, one can create his own custom directive and make them reusable. For creating Custom directives Reference. The sense behind creating reusable directives is to make a set of directives/components written by you just like angularjs provides us using angular.js.
The common use cases of directives in AngularJs is to create custom HTML elements that are able to encapsulate their own template and behavior. Creating directives in AngularJS is accomplished with a directive definition object. This object, which is returned from the definition function, contains various properties that serve to shape how a directive will act in your application.

It’s bad practice to define your directive template with the template property. For this example, we’ll use a relatively simple template, which can be added to $templateCache using ng-template.

Add the following code in index.html 

<!-- specify root element of application -->
<div><!-- register 'my-template.html' with $templateCache -->
<script type="text/ng-template" id="my-template.html">
<div ng-repeat="num in [1,2,3,4,5]">{{ num }}</div>
<!-- your custom element --></div>

Now will we add our custom directive in app.js file

angular.module('myApp', [])
  .directive('myDirective', function() {
      return {
        restrict: 'E',
        templateUrl: 'my-template.html'