Question

我正在深入研究Angular并决定使用Angular Material库来协助我的第一个应用程序。到目前为止，我已经从https://material.angularjs.org/1.1.0/demo/navBar复制了一些非常基本的代码，我已经修改了这些代码以满足我自己的需求。我在绕过路由和md-nav-items时遇到了一些麻烦。

<html>

<head>
    <title>PRT - CIT</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" </meta>
    <!-- Angular Material style sheet -->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> </head>

<body ng-app="MyApp" id="bootstrap-overrides">
    <div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage main">
        <md-content class="md-padding">
            <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
                <md-nav-item md-nav-click="goto('queue')" name="queue">Queue</md-nav-item>
                <md-nav-item md-nav-click="goto('detail')" name="detail">Detail</md-nav-item>
                <md-nav-item md-nav-click="goto('request')" name="request">Request</md-nav-item>
                <!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
          <md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
          <md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
          --></md-nav-bar>
            <div class="ext-content"> External content for `<span>{{currentNavItem}}</span>` </div>
        </md-content>
    </div>

        <script src="node_modules/angular/angular.js"></script>
        <script src="node_modules/angular-resource/angular-resource.js"></script>
        <script src="node_modules/angular-animate/angular-animate.js"></script>
        <script src="node_modules/angular-route/angular-route.js"></script>
        <script src="node_modules/angular-aria/angular-aria.js"></script>
        <script src="node_modules/angular-messages/angular-messages.js"></script>
        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
        <script src="node_modules/angular-material/angular-material.js"></script>
        <script src="js/site.js"></script>
        <link rel="stylesheet" href="/css/site.css">
</body>

</html>

这是我的JS：

(function () {
    'use strict';
    var MyApp = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngRoute']).controller('AppCtrl', AppCtrl);

    function AppCtrl($scope) {
        $scope.currentNavItem = 'queue';
    }
    MyApp.config(function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: '/index.html'
            , controller: 'AppCtrl'
        }).when('/queue', {
            templateUrl: '/partials/queue.html'
            , controller: 'AppCtrl'
        }).when('/detail', {
            templateUrl: '/partials/detail.html'
            , controller: 'AppCtrl'
        }).when('/request', {
            templateUrl: '/partials/request.html'
            , controller: 'AppCtrl'
        });
    });
})();

我对如何路由选项卡感到很遗憾。从我读过的内容来看，md-nav-bar内置了一些路由，但我发现了使用ngRoute以及ui-router的例子。

我也很困惑，实际上在

中填充了我的部分视图

<div class="ext-content"> External content for `<span>{{currentNavItem}}</span>` </div>

我尝试使用md-nav-href而不是md-nav-click，但它最终将我重定向到了页面，而不是填充我的tabs / nav-bar下面的内容;我回滚了我写的JS和HTML的那部分。我已经阅读了在这个区域发布的其他问题，我可以找到，但没有解决基于导航栏项目渲染不同的部分。有什么建议？我以为我可以监视currentNavItem，并根据它的值进行正确的局部渲染，但同样，我不确定如何实际渲染。

Here是一个由于某种原因无法在预览中正确呈现的Plnker，但代码与我在本地的代码相同。

Here是一张在本地运行的图片。

提前致谢！

最终修改：

@ Searching的S / O帮助我让它在下面工作。我已更新plnker link以反映更改。请注意，由于基础追加脚本，它会有点滞后。

Answer 1

ngRoute：当$route服务时，您需要ng-view个容器。这将用于加载您所有路由的页面。

您没有goto()，因此只需使用简单的md-nav-href代码进行导航即可。 currentNavItem由md-selected-nav-item设置，这不是您需要的。让您的设置路线

index.html：将您的链接更新为这样。使用md-nav-href

<md-nav-item md-nav-href="queue" name="queue">Queue</md-nav-item>

index.html：使用html5Mode时，您需要base标记。而不是手动指定它只是使用下面的脚本。确保在此脚本之前加载了angular.js.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>    
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>

脚本：启用html5molde，为什么..那里有太多资源。我鼓励你查找：）

MyApp.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true)
    $routeProvider.when('/', {
        templateUrl : 'index.html',
        controller : 'AppCtrl'
    }).when('/queue', {
        templateUrl : 'queue_partial.html',//actual location will vary according to your local folder structure
        controller : 'AppCtrl'
    }).when('/detail', {
        templateUrl : 'detail_partial.html',
        controller : 'AppCtrl'
    }).when('/request', {
        templateUrl : 'request_partial.html',
        controller : 'AppCtrl'
    });
});

Angular Material和md-nav-bar路由

1 个答案: