【问题标题】:Having trouble with AngularJS routeparams (stateparams)AngularJS routeparams (stateparams) 遇到问题
【发布时间】:2013-10-06 10:21:20
【问题描述】:

我在以下专辑路线上遇到问题。下面是我的控制器和路由文件,我使用的是 angular ui 模块。我正在尝试在 /photos/:albumId 路线上加载相册中的照片。

tripApp.controller('HotelPhotoAlbumController', function($scope, $timeout, Hotel, $stateParams, $http) {

  $scope.hotelId = $stateParams.hotelId;
  $scope.albumId = $stateParams.albumId;

  $http({
    method: 'GET', url: 'hotels/' + $scope.hotelId + '/albums/' + $scope.albumId + '.json'
  }).success(function(data, status, headers, config){
    $scope.photos = data;
  }).error(function(data, status, headers, config){
    $scope.status = status;
  });

});

var tripApp = angular.module('tripApp', ['ui.state', 'ui.bootstrap', 'ui.calendar', 'ui.map', 'infinite-scroll', 'tripApp.directives', 'hotelServices', 'ngSanitize'])
    tripApp
    .value('$anchorScroll', angular.noop)
    .config(function($stateProvider, $urlRouterProvider){

      $urlRouterProvider.otherwise("/hotels")

      $stateProvider
        .state('hotels', {
            url: "/hotels",
            templateUrl: "templates/hotels.html",
            controller: "HotelsController"
        })
          .state("hotels.search", {
              url: "/search",
              templateUrl: "templates/hotels.search.html",
              controller: "HotelsController"
          })
        .state("hotel", {
          url: "/:hotelId",
          templateUrl: "templates/hotel.html",
          controller: "HotelDetailController"
        })
          .state("hotel.index", {
              url: "/",
              templateUrl: "templates/hotel.home.html",
              controller: "HotelDetailController"
          })
          .state("hotel.options", {
              url: "/options",
              templateUrl: "templates/hotel.options.html",
              controller: "HotelRoomsController"
          })
          .state("hotel.reviews", {
              url: "/reviews",
              templateUrl: "templates/hotel.reviews.html",
              controller: "HotelDetailController"
          })
          .state("hotel.photos", {
              url: "/photos",
              templateUrl: "templates/hotel.photos.html",
              controller: "HotelDetailController"
          })
          .state("hotel.photos.details", {
              url: "/photos/:albumId",
              templateUrl: "templates/hotel.photos.details.html",
              controller: "HotelPhotoAlbumController"
          })
          .state("hotel.calendar", {
              url: "/calendar",
              templateUrl: "templates/hotel.calendar.html",
              controller: "HotelCalendarController"
          })
        .state("restaurants", {
        url: "/restaurants",
        templateUrl: "templates/restaurants.html",
        controller: "RestaurantsController"
      })
    })

【问题讨论】:

  • 我无法转到路线 /photos/:albumId ,不显示任何错误,但路线会自动转到索引路线。我的代码有什么问题吗?我不确定这部分:$scope.hotelId = $stateParams.hotelId; $scope.albumId = $stateParams.albumId; $http({ method: 'GET', url: 'hotels/' + $scope.hotelId + '/albums/' + $scope.albumId + '.json' }).success(function(data, status, headers, config){ $scope.photos = data; }).error(function(data, status, headers, config){ $scope.status = status; });

标签: javascript angularjs angular-ui-router


【解决方案1】:

状态 url 声明是相对于父级的,所以不要使用 "/photos/:albumId" 尝试 "/:albumId"

【讨论】:

    猜你喜欢
    • 2015-01-12
    • 1970-01-01
    • 1970-01-01
    • 2013-11-27
    • 2014-12-22
    • 1970-01-01
    • 1970-01-01
    • 2023-03-05
    • 2016-11-15
    相关资源
    最近更新 更多