code: 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);
      }
    };
  }
docs: 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