AngularJS Directive Templates Example

3 ways to specify a template: Inline, Internal <script>, or external file. Also an example of why transclude:true is needed in some cases (try removing it and see what happens).

by cbrwizard

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script type="text/ng-template" id="parent.html">
<mm-content-row ng-repeat="report in selected.reports" date="report.reported_date"/>
</script>

<script type="text/ng-template" id="mm-content-row.html">
<li>
  <span>{{date}}</span>
  <relative-date date="{{date}}"></relative-date>
</li>
</script>

<ul ng-controller="controller">
  <parent selected="selected"></parent>
</ul>

JavaScript

angular.module('app',[]).controller('controller', function($scope){
  $scope.selected = {
    reports: [{reported_date: 1508493112758}, {reported_date: 1508493101933}]
  };
}).directive('parent', function() {
  return {
    restrict: 'E',
    templateUrl: 'parent.html',
    scope: {
      selected: '=',
    }
  };
}).directive('mmContentRow', function() {
  return {
    restrict: 'E',
    templateUrl: 'mm-content-row.html',
    scope: {
      date: '=',
    }
  };
}).directive('relativeDate', function() {
  return {
    restrict: 'E',
    template: '<span>rendered</span>',
    scope: {
      date: '=',
    }
  };
});