角质材料纳霸不改变视角
角质材料纳霸不改变视角
提问于 2017-03-19 15:27:06
我对安古拉杰的路线很陌生。ng视图确实加载了默认页面Home.html。但是，当转到不同的页面时，它不会改变视图。我看过许多解决办法，但似乎都没有效果。我正在使用ASP .Net核心。我所有的Html文件都在www.root文件夹中。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"
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-19 15:34:25
您应该使用md-nav-href而不是md-nav-sref。
为什么？
ui-sref指令用作ui-router的一部分。您使用的是不支持ngRoute指令的ui-sref模块。
来自文档 for mdNavSref
Ui-路由器状态转换到此链接被点击时。呈现为ui-sref。
来自文档 for mdNavHref
url切换到单击此链接的时间。以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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42888394
复制相关文章
相似问题
腾讯云开发者
