Directive

by Rob Rothe

HTML

<div ng-app="app">
   <div ng-controller="Controller as ctrl">
      <div ng-repeat="person in ctrl.people">
         <profile person="person"></profile>
      </div>
      <hr>
      <div ng-repeat="person in ctrl.people">
         <profile person="person"></profile>
      </div>
   </div>
</div>

CSS

profile {
   padding: 10px;
   border: 1px solid silver;
   display: block;
   margin-bottom: 10px;
}

JavaScript

angular
   .module('app', [])
   .controller('Controller', Controller)
   .directive('profile', profile);

function Controller() {
   var vm = this;
   vm.people = [{
      first: 'Jimmy',
      last: 'Page'
   }, {
      first: 'Robert',
      last: 'Plant'
   }, {
      first: 'John',
      last: 'Bonham'
   }, {
      first: 'John Paul',
      last: 'Jones'
   }];
}

function profile() {
   var directive = {
      restrict: 'E',
      template: '<div>{{person.first}}  {{person.last}}</div>',
      scope: {
         person: '='
      }
   };

   return directive;
}