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

 
<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

// 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

 
    <!-- 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

<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

       
<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>