Creating a Customized Directive

In the example, we have repeated (and longish) HTML in the partials (see below). We are going to create a customized directive to streamline the partials.  Again, this is a somewhat manufactured example as the HTML is not that terribly long.

HTML

?

1 2 3

<div class="panel-heading">      <h3 class="panel-title"><button class="btn btn-default" ng-click="login.navigate('/')"><span class="glyphicon glyphicon-chevron-left"></span> Back</button> Login</h3>                </div>

A good place to learn about custom directives is through the Code School course on AngularJS <https://www.codeschool.com/courses/shaping-up-with-angular-js>.

The change amounts to creating a directive (and supporting HTML partial) as follows:

JavaScript

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// app/directives/screenHeading.js (function() { angular.module('myApp'). directive('screenHeading', function() {  return {   restrict: 'A',   templateUrl: 'partials/screenHeading.html',   scope: {    centerName: '@',    leftName: '@',    leftIcon: '@',    leftFunction: '&',    rightName: '@',    rightIcon: '@',    rightFunction: '&'   },   bindToController: true,   controllerAs: 'screenHeading',   controller: function() {   }  }; }); })();    // EOF

HTML

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!-- partials/screenHeading.html (obmit work-around script tag) --> <script type="text/ng-template" id="partials/screenHeading.html">        <table style="width: 100%">         <tr>             <td style="text-align: left; vertical-align: middle; width: 20%;">                 <button type="button" class="btn btn-default btn-sm" ng-if="screenHeading.leftName" ng-click="screenHeading.leftFunction()"><span class="glyphicon {{screenHeading.leftIcon}}" ng-if="screenHeading.leftIcon"></span> {{screenHeading.leftName}}</button>                 <span ng-if="!screenHeading.leftName">&nbsp;</span>             </td>             <td style="text-align: center; vertical-align: middle; width: 60%;">                 <strong>{{screenHeading.centerName}}</strong>             </td>             <td style="text-align: right; vertical-align: middle; width: 20%;">                 <button type="button" class="btn btn-default btn-sm" ng-if="screenHeading.rightName" ng-click="screenHeading.rightFunction()"><span class="glyphicon {{screenHeading.rightIcon}}" ng-if="screenHeading.rightIcon"></span> {{screenHeading.rightName}}</button>                 <span ng-if="!screenHeading.rightName">&nbsp;</span>             </td>         </tr>     </table> </script> <!-- EOF -->

Finally the directive (replacing existing the existing panel-headings)  is used in each of the pages as follows:

On the home page (no back button):

HTML

?

1 2 3 4 5

<div class="panel-heading"      ng-attr-screen-heading      ng-attr-center-name="Home" > </div>

On the other pages, e.g., login (with back button)

HTML

?

1 2 3 4 5 6 7 8

<div class="panel-heading"      ng-attr-screen-heading      ng-attr-center-name="Login"      ng-attr-left-name="back"      ng-attr-left-icon="glyphicon-chevron-left"      ng-attr-left-function="login.navigate('/')" > </div>