Angular Material 和 md-nav-bar 路由不工作

Question

我正在研究 AngularJS 并决定使用 AngularJS Material 库来协助我的第一个应用程序。到目前为止，我已经从 https://material.angularjs.org/latest/demo/navBar 复制了一些非常基本的代码，并对其进行了修改以满足我自己的需要。我在解决路由问题时遇到了一些麻烦，我的代码在下面，请帮助我其他人

.js

var routerApp = angular.module('routerApp', ['ui.router','ngMaterial', 'ngMessages']);

routerApp.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        .state('home', {
            url: '/home',
            templateUrl: 'templates/home.html',
            controller:'HomeController'
        })

         // nested list with custom controller
         .state('home.page1', {
            url: '/page1',
            templateUrl: 'templates/page1.html',
            controller: function ($scope) {
                $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
            }
        })

        // nested list with just some random string data
        .state('home.page2', {
            url: '/page2',
            templateUrl: 'templates/page2.html',
            //template: 'I could sure use a drink right now.',
            controller: function ($scope) {
                $scope.paragraphs = ['paragraph1', 'paragraph2', 'paragraph3'];
            }
        })

});

home.html

<div layout="column" ng-cloak>
    <md-content class="md-padding">
        <md-nav-bar md-no-ink-bar="disableInkBar"
                    md-selected-nav-item="currentNavItem"
                    nav-bar-aria-label="navigation links">
            <md-nav-item md-nav-href=".page1" name="page1">
                Page One
            </md-nav-item>
            <md-nav-item md-nav-href=".page2" name="page2">
                Page Two
            </md-nav-item>
            <md-nav-item md-nav-href=".page1" name="page1">
                Page Three
            </md-nav-item>
            <md-nav-item md-nav-href=".page2" name="page2" disabled>
                Page Four
            </md-nav-item>
        </md-nav-bar>
        <div ui-view></div>
    </md-content>
</div>

家庭控制器：

routerApp.controller('HomeController', function ($scope, $location,$state) {
   $scope.goto = function(page) {
    $state.go(page);
  };
});

Answer 1

你可以试试 md-nav-sref

md-nav-sref is used as Ui-router state to transition to when this link is clicked

<md-nav-item md-nav-sref="#!/page1" name="page1">
                Page One
</md-nav-item>

Angular Material 和 md-nav-bar 路由不工作

Angular Material and md-nav-bar routing not working

angularjs

angularjs-material

.js

home.html

家庭控制器：