Directive de routage AngularJs navbar

Question

J'ai une barre de navigation à deux niveaux qui fonctionne plutôt bien.

• Le menu principal affiche le niveau supérieur.

• Menu d'affichage de second niveau pour tout sous-contenu. Ceci est caché quand aucun sous-élément n'est trouvé.

  <div id="nav-wrap"> 
      <nav id="nav" class="site-nav" data-ng-class="{'sub-nav': hasSubRoutes()}"> 
      <div class="row"> 
       <ul> 
       <li ng-repeat="route in routes"><a href="#{{route.url}}" title="{{ route.config.title }}" data-ng-class="{'active': isCurrentRoute(route)}">{{route.config.title}}</a> 
        <ul data-ng-class="{'active': isCurrentRoute(route)}"> 
        <li ng-repeat="subItem in route.subItems" data-ng-class="{'ui-tabs-selected ui-state-active': isCurrentSubRoute(subItem)}"><a href="#{{subItem.url}}" title="{{subItem.config.title}}"><span>{{subItem.config.title}}</span></a> 
        </li> 
        </ul> 
       </li> 
       </ul> 
      </div> 
      </nav> 
  </div> 
  

Et voici ce que je remplace ce qui précède avec:

<my-navbar /> 

Et voici le code pour tout le reste

(function() { 
"use strict"; 

var newRoutes = { 
    routes: 
    [ 
    { "url": "/layout", "config": { "title": "Layout", "templateUrl": "pageContent/layout.html" } }, 
    { "url": "/commandments", "config": { "title": "Commandments", "templateUrl": "pageContent/commandments.html" } }, 
    { "url": "/release", "config": { "title": "Release Notes", "templateUrl": "pageContent/release.html" } }, 
    { "url": "/resources", "config": { "title": "Resources", "templateUrl": "pageContent/resources.html" } }, 
    { 
     "url": "/whatever", "redirectTo": "/whatever/resources1", "config": { "title": "Whatever" }, 
     "subItems": 
     [ 
     { "url": "/whatever/resources1", "config": { "title": "Resources", "templateUrl": "pageContent/resources.html" } }, 
     { "url": "/whatever/release1", "config": { "title": "Release", "templateUrl": "pageContent/release.html" } } 
     ] 
    } 
    ], 
    otherwise: "/layout" 
}; 

angular.module("themeApp", ["ngRoute"]) 
    .constant("routes", newRoutes.routes) 
    .constant("otherwise", newRoutes.otherwise) 
    .config(function ($routeProvider, routes, otherwise) { 

     routes.forEach(function (r) { 
      if (r.redirectTo) { 
       $routeProvider.when(r.url, { 
        redirectTo: r.redirectTo 
       }); 
      } 
      if (r.subItems) { 
       r.subItems.forEach(function (sr) { 
        $routeProvider.when(sr.url, sr.config); 
       }); 
      } else { 
       $routeProvider.when(r.url, r.config); 
      } 
     }); 
     $routeProvider.otherwise({ redirectTo: otherwise }); 

    }) 
    .controller("themeController", ["$scope", "$location", "routes", function ($scope, $location, routes) { 

     //Public Parameters 
     $scope.routes = routes; 

    }]) 

    .directive("myNavbar", [function() { 
     return { 
      restrict: "E", 
      template: '<div id="nav-wrap"><nav id="nav" class="site-nav" data-ng-class="{\'sub-nav\': hasSubRoutes()}"><div class="row"><ul><li ng-repeat="route in routes"><a href="#{{route.url}}" title="{{ route.config.title }}" data-ng-class="{\'active\': isCurrentRoute(route)}">{{route.config.title}}</a><ul data-ng-class="{\'active\': isCurrentRoute(route)}"><li ng-repeat="subItem in route.subItems" data-ng-class="{\'ui-tabs-selected ui-state-active\': isCurrentSubRoute(subItem)}"><a href="#{{subItem.url}}" title="{{subItem.config.title}}"><span>{{subItem.config.title}}</span></a></li></ul></li></ul></div></nav></div>', 
      replace: true, 
      controller: function ($scope, $location) { 

       //COPIED FROM themeController 
       //Public Methods 
       $scope.isCurrentRoute = isCurrentRoute; 
       $scope.isCurrentSubRoute = isCurrentSubRoute; 
       $scope.hasSubRoutes = hasSubRoutes; 

       //Private Variables 
       var hasSubItems; 

       //Private Methods 
       function hasSubRoutes() { 
        return hasSubItems; 
       } 

       function isCurrentRoute(route) { 
        var current = getCurrent(route); 

        hasSubItems = false; 
        if (current) { 
         hasSubItems = route.subItems && route.subItems.length > 0; 
        } 
        return current; 
       } 

       function isCurrentSubRoute(route) { 
        return getCurrent(route); 
       } 

       function getCurrent(route) { 
        var path = route.url; 
        return $location.path().substr(0, path.length) === path; 
       } 
      } 
     }; 
    }]); 
    }()) 

Voici le problème:

1. En ce moment, la barre de menu apparaît et je peux cliquer sur les commandes de menu, le code pour manipuler les onglets de menu fonctionne très bien! Cependant, je n'ai pas de contenu.
2. Lorsque je restaure le HTML (utilisez le code HTML 'nav-wrap' ci-dessus et copiez le javascript du contrôleur de directive dans le themeController et supprimez '< my-navbar >'), cela fonctionne parfaitement. Le menu fonctionne et j'obtiens le contenu.

Merci, Duane

Answer 1

Bien que je n'ai pas eu d'erreurs JavaScript, je l'ai un avertissement que j'ai finalement fait attention à.

Le navigateur n'a pas aimé mon < my-navbar/> de fermeture automatique, bien que je jure que j'ai fait cela avant avec d'autres directives ... mais je pourrais me tromper.

Une fois que je l'ai changé:

<my-navbar></my-navbar> 

tout fonctionnait.

Merci Khanh de travailler avec moi !!!!