Amend hz-table-footer documentation and allow optional message

Provide directive examples in the ngDoc.
Allow user to pass in a template string to replace the
<span>...</span> in hz-table-footer.html.

Change-Id: I4f1aecabb1066a5f653fca7649f1ec1abfa04f37
Closes-Bug: #1549431

horizon/static/framework/widgets/table/hz-table-footer.directive.js

@@ -20,31 +20,60 @@
     .module("horizon.framework.widgets.table")
     .directive('hzTableFooter', hzTableFooter);
 
-  hzTableFooter.$inject = ['horizon.framework.widgets.basePath'];
+  hzTableFooter.$inject = ['horizon.framework.widgets.basePath',
+                           '$compile'];
 
   /**
     * @ngdoc directive
     * @name horizon.framework.widgets.table.directive:hzTableFooter
     *
     * @description
-    * The `hzTableFooter` directive provides markup for a general
-    * table footer.  It takes an array of table items.
+    * The `hzTableFooter` directive provides markup for a general table footer.
+    * It takes an array of table items. By default, it simply prints out
+    * 'Displaying x items'. However, you can provide a custom template message.
+    * It will override the span tag in hz-table-footer.html.
     *
     * @restrict A
     * @scope
     *
+    * @example
+    * ```
+    * <table>
+    *   ...
+    *   <tfoot hz-table-footer items="items"></tfoot>
+    * </table>
+    * ```
+    *
+    * or
+    *
+    * var message = "<span>{$ items.length $} items</span>";
+    * ```
+    * <table>
+    *   ...
+    *   <tfoot hz-table-footer items="items" message="{$ message $}"></tfoot>
+    * </table>
+    * ```
+    *
     */
-  function hzTableFooter(basePath) {
+  function hzTableFooter(basePath, $compile) {
     var directive = {
       restrict: 'A',
       scope: {
         items: '='
       },
       templateUrl: basePath + 'table/hz-table-footer.html',
-      transclude: true
+      transclude: true,
+      link: link
     };
 
     return directive;
+
+    function link(scope, element, attrs) {
+      // use the message template if provided by the user
+      if (attrs.message) {
+        element.find('.display').replaceWith($compile(attrs.message)(scope));
+      }
+    }
   }
 
 })();

horizon/static/framework/widgets/table/table.spec.js

@@ -288,6 +288,24 @@
       expect($element.find('span').text()).toBe('Displaying 3 items');
     });
 
+    it('displays the correct custom message string', function() {
+      $scope.message = "<span>{$ items.length $} items</span>";
+
+      var markup =
+        '<table st-table="fakeTableData" st-safe-src="safeTableData" hz-table>' +
+          '<tfoot hz-table-footer items="safeTableData" message="{$ message $}">' +
+          '</tfoot>' +
+        '</table>';
+
+      $element = angular.element(markup);
+      $compile($element)($scope);
+      $scope.$apply();
+
+      expect($element).toBeDefined();
+      expect($element.find('span').length).toBe(1);
+      expect($element.find('span').text()).toBe('3 items');
+    });
+
     it('includes pagination', function() {
       expect($element.find('div').attr('st-items-by-page')).toEqual('20');
     });