contribs/gmf/src/mobile/navigation/component.js
function mobileNavigationComponent() {
  return {
    restrict: 'A',
    controller: 'gmfMobileNavController as navCtrl',
    bindToController: true,
    scope: true,
    /**
     * @param {angular.IScope} scope Scope.
     * @param {JQuery} element Element.
     * @param {angular.IAttributes} attrs Attributes.
     * @param {angular.IController=} navCtrl Controller.
     */
    link: (scope, element, attrs, navCtrl) => {
      if (!navCtrl) {
        throw new Error('Missing navCtrl');
      }
      navCtrl.init(element);
    }
  };
}
function mobileNavigationComponent() {
  return {
    restrict: 'A',
    controller: 'gmfMobileNavController as navCtrl',
    bindToController: true,
    scope: true,
    /**
     * @param {angular.IScope} scope Scope.
     * @param {JQuery} element Element.
     * @param {angular.IAttributes} attrs Attributes.
     * @param {angular.IController=} navCtrl Controller.
     */
    link: (scope, element, attrs, navCtrl) => {
      if (!navCtrl) {
        throw new Error('Missing navCtrl');
      }
      navCtrl.init(element);
    }
  };
}
function mobileNavigationComponent ( ) { return { restrict : 'A' , controller : 'gmfMobileNavController as navCtrl' , bindToController : true , scope : true , /**
     * @param {angular.IScope} scope Scope.
     * @param {JQuery} element Element.
     * @param {angular.IAttributes} attrs Attributes.
     * @param {angular.IController=} navCtrl Controller.
     */ link : ( scope , element , attrs , navCtrl ) => { if ( ! navCtrl ) { throw new Error ( 'Missing navCtrl' ) ; } navCtrl . init ( element ) ; } } ; }
An "gmf-mobile-nav" directive defining the behavior of a tree-structured menu.

The directive is to be placed on a `nav` element, with the following
structure:
<nav gmf-mobile-nav>
<header>
<a class="gmf-mobile-nav-go-back" href="#"></a>
</header>
<div class="gmf-mobile-nav-active gmf-mobile-nav-slide">
<ul>
<li>
<a href data-target="#devices">Devices</a>
</li>
<li>
<a href data-target="#vehicles">Vehicles</a>
</li>
</ul>
</div>
<div id="devices" class="gmf-mobile-nav-slide" data-header-title="Devices">
<ul>
<li>Mobile Phones</li>
<li>Televisions</li>
</ul>
</div>
<div id="vehicles" class="gmf-mobile-nav-slide" data-header-title="Vehicles">
<ul>
<li>Cars</li>
<li>Planes</li>
<li>Bicycles</li>
</ul>
</div>
</nav>

When an element slides in the directive changes the text in the header.

@return {angular.IDirective} The Directive Definition Object.
@ngInject
An gmf - mobile - nav directive defining the behavior of a tree - structured menu .