Chapter 1: Building a simple element directive

by msfrisbie

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<!-- specify root element of application -->
<div ng-app="myApp">
    <!-- 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>
    </script>    
    
    <!-- your custom element -->
    <my-directive></my-directive>
</div>

JavaScript

// application module definition
angular.module('myApp', [])
.directive('myDirective', function() {
    // return the directive definition object
    return {
        // only match this directive to element tags
        restrict: 'E',
        // insert the template matching 'my-template.html'
        templateUrl: 'my-template.html'
    };
});