在Angular中传递其他参数

时间:2015-12-22 09:09:58

标签: angularjs

我有酒店列表,我在URL hotel / nice-hotel的参数中传递了一个URL友好的slug。

这没关系。

我还希望将酒店ID传递到下一页,但不希望在URL中传递它。这样做的最佳方式是什么?

       .state('hotels', { 
            title: 'Hotels page',
            url: '/hotels',
            controller: 'HotelsController',
            templateUrl: 'app/components/hotels/hotelsView.html'
        })

        .state('hotel', { 
            title: 'Hotel page',
            url: '/hotel/:hotelName',
            controller: 'HotelController',
            templateUrl: 'app/components/hotel/hotelView.html'
            params:{hotelId:hotelId};
        })

我正在传递的链接

<a type="button" ui-sref="hotel({hotelId:{{hotel.hotelId}},hotelName:{hotel.hotelName}})" href="/hotel/{{hotel.name | slugify}}" class="ach-hl-btn btn btn-warning">Select</a>

3 个答案:

答案 0 :(得分:1)

由于您使用的是ui-router,因此您可以使用params

.state('stateName', {
    //other config
    params: {
        id: id_value
    }
})

您可以使用$stateParams

访问控制器中的值
app.controller('Ctrl', ['$scope', '$stateParams', function($scope, $stateParams) {
    console.log($stateParams);
}]

答案 1 :(得分:0)

.state('stateName', {
//other config
controller:stateNameControler,
params: {
    id: id_value
}})

如果你儿子在该州的控制器中接受stateParams,这可能会引发一些错误

app.controller('stateNameControler', ['$scope', '$stateParams', function($scope, $stateParams) {
console.log($stateParams);}]

如果您不想在链接上使用params,可以在sateprovider中使用 params ,如下所示

.state('playgame',{
            url: "/play",
            params:{ src     :null,
                     gameName:null} ,
            templateUrl: "partials/play.html",
            controller:'gamePlayController'
          })

现在在相应的控制器上

mainApp.controller('gamePlayController', ['$scope','$state','$http','Game','Facebook','$stateParams', function($scope,$state,$http,$Game,Facebook,$stateParams){
      var imageElement=document.getElementById("image");
      imageElement.src=$stateParams.src;
      // $scope.dagi=$stateParams.data;
      console.log($stateParams.gameName);
      $scope.goBack=function(){
        $state.go($stateParams.gameName);
      }


    }]);

在你的标记中

<button ng-click="onClick()"></button>

和你的函数`

$scope.onClick(){$state.go('stateName',{'src':dataURL,'gameName':$scope.gameName}); }

答案 2 :(得分:0)

看到酒店名称正在URL中传递,params中不需要它。它仍然可以使用$ stateParams

在后续页面中访问

使用ui-router

       .state('hotels', { 
            title: 'Hotels page',
            url: '/hotels',
            controller: 'HotelsController',
            templateUrl: 'app/components/hotels/hotelsView.html
        })

        .state('hotel', { 
            title: 'Hotel page',
            url: '/hotel/:hotelName',
            controller: 'HotelController',
            templateUrl: 'app/components/hotel/hotelView.html',
            params:{
                hotelId:{key:'value'},
            }
        })

使用ui-sref传递链接

<a type="button" ui-sref="hotel({hotelId:hotel.hotelId, hotelName:hotel.name})" >Select</a>

可以使用$ stateParams

在酒店页面的控制器中访问
console.log($stateParams);