AngularJs navbar routing directive - angularjs

Question

I have a two-level navbar that works quite well.
Top level displays main menu.
Second level displays menu for any subcontent. This is hidden when no sub items are found.
<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">{{route.config.title}}
<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)}"><span>{{subItem.config.title}}</span>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
And this is what I'm replacing the above with:
<my-navbar />
And here is the code for everything else
(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">{{route.config.title}}<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)}"><span>{{subItem.config.title}}</span></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;
}
}
};
}]);
}())
Here's the problem:
Right now, the menu bar shows up and I can click the menu commands, the code to manipulate the menu tabs works great! However, I get no content.
When I restore the HTML (use the 'nav-wrap' HTML from above, and copy the javascript from the directive controller into the themeController and remove '<my-navbar>'), it works perfectly. The menu works and I get the content.
Thanks,
Duane

Answer 1

While I didn't get any JavaScript errors, I did get a warning that I finally paid attention to.
The browser didn't like my self-closing <my-navbar />, though I swear I've done that before with other directives...but I could be wrong.
Once I changed it to:
<my-navbar></my-navbar>
everything worked.
Thank you Khanh for working with me!!!!