初始模板加载得很好，但是当我单击 Purpose.html 内的链接来加载新 View 时，尽管浏览器中的地址发生了变化，但没有任何反应。控制台中没有出现错误。
index.html
<!doctype html>
<html ng-app="playlist">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>Playlist Roulette</title>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet">
<link href="/stylesheets/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script><!-- load angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-resource.min.js"></script>
<script src="/javascripts/core.js"></script>
<script src="/javascripts/genre-list.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-body" ng-view>
</div>
</div>
</div>
</body>
<script src="/javascripts/bootstrap.min.js"></script>
</html>
core.js
var app = angular.module('playlist', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'PurposeController as purpose',
templateUrl:'../purpose.html'
})
.when('/genre', {
controller:'GenreController as genre',
templateUrl:'../genre.html'
});
})
.factory("settings",function(){
return {
purpose: null,
genre: [],
track: null,
popularity: false
};
})
.controller('PurposeController', function(settings) {
var purpose = this;
purpose.navRight = "Skip";
purpose.save = function(option){
if (purpose.isActive(option)) {
settings.purpose = null;
purpose.navRight = "Skip";
} else {
settings.purpose = option;
purpose.navRight = "Next";
}
};
purpose.isActive = function(option){
return settings.purpose == option;
};
})
.controller('GenreController', function(settings) {
var genre = this;
genre.navRight = "Skip";
genre.save = function(genreItem){
if (genre.isActive(genreItem)) {
settings.genre.splice(settings.genre.indexOf(genreItem), 1);
if (settings.genre.length() == 0){
genre.navRight = "Skip";
}
} else {
settings.genre.push(genreItem);
genre.navRight = "Next";
}
};
genre.isActive = function(genreItem){
return settings.genre.indexOf(genreItem) > -1;
};
});
目的.html
<div class="step">
<div class="step-indicator">1</div><span class="step-text">What type of playlist do you want to make?</span>
</div>
<div class="row">
<div ng-click="purpose.save('Party')" ng-class="{active:purpose.isActive('Party')}" class="col-md-3 purpose-item">
<div class="purpose-icon purple text-center"></div>
<div class="step-text text-center">Party</div>
</div>
<div ng-click="purpose.save('Study')" ng-class="{active:purpose.isActive('Study')}" class="col-md-3 purpose-item">
<div class="purpose-icon red text-center"></div>
<div class="step-text text-center">Study</div>
</div>
<div ng-click="purpose.save('Relax')" ng-class="{active:purpose.isActive('Relax')}" class="col-md-3 purpose-item">
<div class="purpose-icon orange text-center"></div>
<div class="step-text text-center">Relax</div>
</div>
<div ng-click="purpose.save('Workout')" ng-class="{active:purpose.isActive('Workout')}" class="col-md-3 purpose-item">
<div class="purpose-icon yellow text-center"></div>
<div class="step-text text-center">Workout</div>
</div>
</div>
<div class="row nav-row">
<div class="col-xs-1 col-sm-offset-4 progress-container"><div class="progress-dot active"></div></div>
<div class="col-xs-1 progress-container"><div class="progress-dot"></div></div>
<div class="col-xs-1 progress-container"><div class="progress-dot"></div></div>
<div class="col-xs-1 progress-container"><div class="progress-dot"></div></div>
<div class="col-xs-2 col-sm-offset-2">
<a href="#/genre" class="step-text nav-button text-uppercase">
{{purpose.navRight}}
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
流派.html
<div class="step">
<div class="step-indicator">2</div><span class="step-text">Select up to four genres.</span>
</div>
<div class="row nav-row">
<div class="col-xs-1 col-sm-offset-4 progress-container"><div class="progress-dot active"></div></div>
<div class="col-xs-1 progress-container"><div class="progress-dot"></div></div>
<div class="col-xs-1 progress-container"><div class="progress-dot"></div></div>
<div class="col-xs-1 progress-container"><div class="progress-dot"></div></div>
</div>
</div>
最佳答案
您的路由无法正常工作，因为，到 aa077e8,(angularjs 1.6.0 (最新)) 用于 $location hash-bang URL 的默认哈希前缀已从空字符串 ('') 更改为 bang ( '!')。
因此，如果您确实不想使用哈希前缀，则可以通过向应用程序添加配置 block 来恢复以前的行为:
var app = angular.module('playlist', ['ngRoute'])
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}])
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller:'PurposeController as purpose',
templateUrl:'../purpose.html'
})
.when('/genre', {
controller:'GenreController as genre',
templateUrl:'../genre.html'
});
})
您可以获取微尘信息参见 - MigraAngularJS Guidetion - aa0077e8
关于javascript - 单击链接后 AngularJS View 不会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41310767/