单击链接后,AngularJS视图不会更改

时间:2016-12-24 06:00:56

标签: javascript angularjs angular-routing

初始模板加载得很好,但是当我点击purpose.html内部的链接加载新视图时,虽然浏览器中的地址发生了变化,但没有任何反应。控制台中没有出现错误。

的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;
    };
});

purpose.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>

genre.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>

1 个答案:

答案 0 :(得分:0)

您的路由无法正常工作,因为,对于aa077e8,(angularjs 1.6.0(最新)),用于$ location hash-bang网址的默认哈希前缀已从空字符串('')更改为bang( '!')。

因此,如果您确实希望没有hash-prefix,那么可以通过向应用程序添加配置块来恢复以前的行为:

 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