Question

我是angularjs路由的新手。 ng-view会加载默认页面Home.html。但是当它转到不同的页面时它不会改变视图。我看过很多解决方案，但似乎都没有。我正在使用ASP .Net Core。我的所有Html文件都在wwwroot文件夹中。 javascript文件位于子文件夹中。这是我的HTML

<md-content class="md-padding">
    <md-nav-bar md-selected-nav-item="currentNavItem"
                nav-bar-aria-label="navigation links">
        <md-nav-item md-nav-href="#/" name="home">Home</md-nav-item>
        <md-nav-item md-nav-sref="#/about" name="about">About</md-nav-item>
        <md-nav-item md-nav-sref="#/contact" name="contact">
            Contact
        </md-nav-item>

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

    <md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>

</md-content>

<div ng-view></div>'

这是我的javascript：

var portfolioApp = angular.module('portfolioApp', ['ngMaterial', 'ngRoute']);

portfolioApp.config(function ($routeProvider) {
    $routeProvider.when("/",
        {
            templateUrl: "/Home.html",
            controller: "NavigationController"
        })
        .when("/about",
        {
            templateUrl: "/About.html",
            controller: "NavigationController"
        })
        .when("/contact",
        {
            templateUrl: "/Contact.html",
            controller: "NavigationController"
        });
});

Answer 1

您应该使用md-nav-href代替md-nav-sref。

<强>为什么吗

ui-sref指令用作ui-router的一部分。您正在使用不支持ngRoute指令的ui-sref模块。

来自mdNavSref的{{3}}：

Ui-router状态转换为单击此链接时。呈现为一个ui-sref。

来自mdNavHref的{{3}}：

要切换到单击此链接的网址。呈现为ng-href 一个ui-sref。

你需要后两者。

这是一个有效的例子：

(function() {

  'use strict';

  angular.module('portfolioApp', ['ngMaterial', 'ngRoute'])

})();

(function() {

  'use strict';

  angular.module('portfolioApp').config(function($routeProvider, $locationProvider) {

    $locationProvider.hashPrefix('');
    
    // or use the HTML5 History API
    // $locationProvider.html5Mode(true); // this will remove the hashbang altogether

    $routeProvider.when("/", {
        template: "Homepage {{HomeCtrl.location}}",
        controller: function() {},
        controllerAs: 'HomeCtrl'
      })
      .when("/about", {
        template: "About page",
        controller: function() {}
      })
      .when("/contact", {
        template: "Contact page",
        controller: function() {}
      });
  });

})();

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>


<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<div ng-app="portfolioApp">

  <md-content class="md-padding">

    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
      <md-nav-item md-nav-href="#/" name="home">Home</md-nav-item>
      <md-nav-item md-nav-href="#/about" name="about">About</md-nav-item>
      <md-nav-item md-nav-href="#/contact" name="contact">
        Contact
      </md-nav-item>
    </md-nav-bar>

    <br>

    <div class="ext-content">
      <span>Current nav item: {{currentNavItem}}</span>
    </div>

    <div ng-view class="md-padding"></div>

  </md-content>

</div>

Angular Material Navbar不会更改视图

1 个答案: