Question

我有一个两级导航栏，效果很好。

顶级显示主菜单。

第二级显示任何子内容的菜单。当没有找到子项时，这是隐藏的。

<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>

这就是我用以下内容取代上述内容：

<my-navbar />

这是其他一切的代码

(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;
                }
            }
        };
    }]);
  }())

问题在于：

现在，菜单栏显示，我可以点击菜单命令，操作菜单标签的代码效果很好！但是，我没有内容。
当我恢复HTML（使用上面的'nav-wrap'HTML，并将指令控制器中的javascript复制到themeController并删除'＆lt; my-navbar＆gt;'）时，它完美无缺。菜单有效，我得到了内容。

谢谢，杜安

Answer 1

虽然我没有收到任何JavaScript错误，但我确实收到了警告，我终于注意到了。

浏览器不喜欢我的自我关闭＆lt; my-navbar /＆gt ;,虽然我发誓我之前已经做过其他指令......但我可能错了。

我将其更改为：

<my-navbar></my-navbar>

一切顺利。

谢谢Khanh和我一起工作!!!!

AngularJs导航栏路由指令

1 个答案: