Question

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

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

当我尝试这个时，我得到了＃34;找不到未定义的属性＆＃34;。

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

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

1 个答案: