Question

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

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

我已在“单页面应用程序”/网站中成功实现了多个页面的路由。这些页面有一个自然的顺序，所以我试图在标题中实现Previous和Next按钮（或链接），以便Next按钮循环通过Home＆gt;第1页＆gt;第2页＆gt;第3页＆gt; Home，前一个按钮从Home＆gt;第3页＆gt;第2页＆gt;第1页＆gt;主页。

阅读了一些相关的文章，教程，示例和StackOverflow Q＆amp;我已经尝试了一些我认为可行的方法，但是当路径/ ng时，Prev / Next按钮不会按预期动态更新 - 查看更改。

即。在下面的简化代码中（包含Home，About和Contact页面），Previous / Next按钮的目标及其各自的功能nextPage()和prevPage()始终与“Home”页面的上一页和下一页相关，即使其他页面已导航到。

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）。

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

Answer 1

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

您可以为homeController路由添加另一个/，并让所有三个路由控制器相应地更改mainController的{{1}}和nextPage功能。

像：

prevPage

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

Answer 2

它的行为是这样的，是因为你在控制器中定义的范围对象只在ng-view内，而在它之外，范围被绑定到主控制器（因为你传递了它）在ng-controller）。

你可以在这里看到它http://plnkr.co/edit/sh5JcJs82c7uIiVg6Skg?p=preview hello变量在ng-view之外的位置不同。

我很沮丧你应该使用$rootScope，这是一个有效的工作人员：http://plnkr.co/edit/krs7mzcIVktXxFPvG44R?p=preview

（顺便说一句，另一个问题，你在接触控制器中做错了，我修好了）。

Answer 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'); 
         }
      };
});

Angular.js路由：上一页和下一页寻呼机

index.html（重要位）

的script.js

3 个答案: