angular ng-route $route.next 在页面视图之间滑动答案

【问题标题】：angular ng-route $route.next to slide between page-viewsangular ng-route $route.next 在页面视图之间滑动
【发布时间】：2015-07-09 04:38:05
【问题描述】：

我正在尝试构建一个在我的不同视图之间滑动的应用，使用下一个和上一个按钮来切换视图。无论出于何种原因，尽管在 $ng-Route documentation 中，$route.next 和 $route.previous 在我的 .run() 语句中都不起作用。

index.html:

<!doctype HTML>
...
<button ng-click="go(prevRoute);" class="slider-left">Left</button>
<button ng-click="go(nextRoute);" class="slider-right">Right</button>
...

app.js

angular.module('myApp'
...
.config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        title: 'Home',
        niceName: 'home',
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        title: 'About Us',
        niceName: 'about',
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .when('/projects', {
        title: 'Our Work',
        niceName: 'projects',
        templateUrl: 'views/projects.html',
        controller: 'ProjectsCtrl',
        controllerAs: 'projects'
      })
      .when('/contact', {
        title: 'Contact',
        niceName: 'contact',
        templateUrl: 'views/contact.html',
        controller: 'ContactCtrl',
        controllerAs: 'contact'
      })
      .otherwise({
        redirectTo: '/'
      });
      // use the HTML5 History API
      $locationProvider.html5Mode(true);
  })
  .run(['$rootScope', '$route', function($rootScope, $route) {
    $rootScope.$on('$routeChangeSuccess', function() {
      //create variable to add current route title to pageTitle      
      $rootScope.pageTitle = $route.current.title;
      //create functions for next and previous buttons
      $rootScope.nextRoute = $route.next.niceName;
      $rootScope.prevRoute = $route.previous.niceName;
   });
}])
.controller('AppCtrl', function ($scope, $location) {
  $scope.go = function ( path ) {
    $location.path( path );
  };
});

当我尝试这个时，我得到“找不到未定义的属性”。

【问题讨论】：

标签： javascript angularjs ngroute

【解决方案1】：

目前，我能够做到这一点的唯一方法是将数据附加到路线，指定下一条路线。

$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl',
    controllerAs: 'main',
    data: {
      title: 'Home',
      niceName: 'home',
      nextRoute: 'about',
      prevRoute: null,
      slide: 1
    }
  })
  ...
})
.run(['$rootScope', '$route', function($rootScope, $route) {
      $rootScope.$on('$routeChangeSuccess', function() {
      //create variable to add current route title to pageTitle      
      $rootScope.pageTitle = $route.current.data.title;

      //create variables for page entitities
      $rootScope.nextRoute = $route.current.data.nextRoute;
      $rootScope.prevRoute = $route.current.data.prevRoute;
      $rootScope.slideNo = $route.current.data.slide;
    });

【讨论】：