Angular.js 路由：上一个和下一个寻呼机答案

【问题标题】：Angular.js routing: Previous and Next pagerAngular.js 路由：上一个和下一个寻呼机
【发布时间】：2015-10-09 17:31:17
【问题描述】：

我是 Angular.js 的新手，所以我确信有一个非常简单的解决方案，我很惊讶没有一堆教程涵盖这个问题。

（有很多内容涵盖一长串结果的分页 - 但我的问题似乎完全不同。）

我已经成功地为我的“单页应用程序”/网站中的多个页面实现了路由。这些页面有一个自然的顺序，所以我试图在标题中实现上一个和下一个按钮（或链接），以便下一个按钮循环通过主页 > 第 1 页 > 第 2 页 > 第 3 页 > 主页，上一个按钮转到从主页 > 第 3 页 > 第 2 页 > 第 1 页 > 主页向后。

阅读了一些相关的文章、教程、示例和 StackOverflow 问答后，我尝试了一些我认为可能有效的方法，但是当路由 / ng-view 时，上一个 / 下一个按钮不会按预期动态更新变化。

即在我下面的简化代码中（带有主页、关于和联系页面），上一个/下一个按钮的目标及其各自的功能nextPage() 和 prevPage() 始终与“主页”页面的上一页和下一页相关，即使另一个页面已被导航到。

index.html（重要部分）

<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  <script src="script.js"></script>
</head>

<!-- define angular controller -->
<body ng-controller="mainController">

  <nav class="navbar navbar-default">
    <div class="container">

      <button class="btn" ng-click="prevPage()">Previous</button>

      <button class="btn" ng-click="nextPage()">Next</button>

    </div>
  </nav>

  <div id="main">
    <div ng-view></div> 
  </div>

</body>

</html>

script.js

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

app.config(function($routeProvider) {
    $routeProvider

        // Page routes
        .when('/', { templateUrl : 'pages/home.html', controller  : 'mainController' })
        .when('/about', { templateUrl : 'pages/about.html', controller  : 'aboutController' })
        .when('/contact', { templateUrl : 'pages/contact.html', controller  : 'contactController' })
        .otherwise( {redirectTo:'/'} );
});

// create the controller and inject Angular's $scope
app.controller('mainController', function($scope, $location) {
    $scope.nextPage = function() { $location.path('/about'); };
    $scope.prevPage = function() { $location.path('/contact'); };
});

app.controller('aboutController', function($scope, $location) {
    $scope.nextPage = function() { $location.path('/contact'); };
    $scope.prevPage = function() { $location.path('/'); };
});

app.controller('contactController', function($scope, $location) {
    $scope.nextPage = function() { $location.path('/contact'); };
    $scope.prevPage = function() { $location.path('/'); };
});

Here's a Plunker（基于this one）。

实现这一目标的最佳方法是什么？！

【问题讨论】：

标签： angularjs angularjs-routing

【解决方案1】：

问题是按钮绑定到mainController 上的功能，而不是在显示/about 和/contact 路由时更改的功能。

您可以为/ 路由添加另一个homeController，并让所有三个路由控制器适当地更改mainController 的nextPage 和prevPage 函数。

喜欢：

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

app.config(function($routeProvider) {
    $routeProvider

        // Page routes
        .when('/', { templateUrl : 'pages/home.html', controller  : 'homeController' })
        .when('/about', { templateUrl : 'pages/about.html', controller  : 'aboutController' })
        .when('/contact', { templateUrl : 'pages/contact.html', controller  : 'contactController' })
        .otherwise( {redirectTo:'/'} );
});

// create the controller and inject Angular's $scope
app.controller('mainController', function($scope, $location) {
  $scope.nextPage = function() { $location.path('/about'); };
  $scope.prevPage = function() { $location.path('/contact'); };
});

app.controller('homeController', function($scope, $location) {
  $scope.$parent.nextPage = function() { $location.path('/about'); };
  $scope.$parent.prevPage = function() { $location.path('/contact'); };
});

app.controller('aboutController', function($scope, $location) {
  $scope.$parent.nextPage = function() { $location.path('/contact'); };
  $scope.$parent.prevPage = function() { $location.path('/'); };
});

app.controller('contactController', function($scope, $location) {
  $scope.$parent.nextPage = function() { $location.path('/'); };
  $scope.$parent.prevPage = function() { $location.path('/about'); };
});

工作Plunker：http://plnkr.co/edit/8Q2IIn?p=preview

【讨论】：

【解决方案2】：

之所以会这样，是因为你在控制器中定义的作用域对象，只在ng-view之内，而在它之外，作用域绑定到主控制器（因为你传入ng-controller)。

你可以在这里看到它http://plnkr.co/edit/sh5JcJs82c7uIiVg6Skg?p=preview 其中hello 变量在ng-view 之外时会有所不同。

我的建议是你应该使用$rootScope，这是一个可以工作的插件：http://plnkr.co/edit/krs7mzcIVktXxFPvG44R?p=preview

（顺便说一句，另一个问题，你在联系人控制器中做错了，我修复了它）。

【讨论】：

【解决方案3】：

试试这个：

此示例使用一个路由器控制器

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

app.config(function($routeProvider) {
    $routeProvider
    .when('/home', { templateUrl : 'pages/home.html', controller  : 'mainController' })
    .when('/about', { templateUrl : 'pages/about.html', controller  : 'mainController' })
    .when('/contact', { templateUrl : 'pages/contact.html', controller  : 'mainController' })
    .otherwise( {redirectTo:'/home'} );
});

// create the controller and inject Angular's $scope
app.controller('mainController', function($scope, $rootScope, $location) {
     $scope.nextPage = function() { 
         if(!$rootScope.currentPage || $rootScope.currentPage == 0){
            $rootScope.currentPage = 1;
            $location.path('/about'); 
         }else if($rootScope.currentPage == 1){
            $rootScope.currentPage = 2;
            $location.path('/contact'); 
         }
         else if($rootScope.currentPage == 2){
            $rootScope.currentPage = 0;
            $location.path('/home'); 
         }
     }

     $scope.prevPage = function() { 
         if(!$rootScope.currentPage || $rootScope.currentPage == 0){
            $rootScope.currentPage = 2;
            $location.path('/contact'); 
         }else if($rootScope.currentPage == 1){
            $rootScope.currentPage = 0;
            $location.path('/home'); 
         }else{
            $rootScope.currentPage = 1;
            $location.path('/about'); 
         }
      };
});

【讨论】：