如何将状态参数传递给 ui-router？

Question

正在尝试将参数传递给我的 ui 路由器：

$state.go('orderDetail', {myParam: {accountID: $scope.selectedAccount}})

在我的 stateprovider 中，orderDetail 状态如下所示：

.state('orderDetail', {
    templateUrl: 'modules/common/orders/partials/detail.html?referrer',
    controller: 'OrderDetailCtrl',
    url: '/detail/:myParam',
    resolve: {

        orderDetails: function (myservice, configService, $stateParams) {
            console.log('resolve');
            var referrer = $stateParams.myParam;
            debugger;
            console.log('stateParm', referrer.accountID);
            console.log('order detail resolving');
            //todo remove hardcoded
            return myservice.getDetail(configService.config('mock_order_detail').url + '?accountId=2233');
        }
    }
});

然而 console.log('stateParm', referrer.accountID); 显示为 undefined。如何传入 accountID 参数？

Answer 1

要识别 myParam 是对象的状态，您需要在状态 params 选项中定义其默认值，方法是分配 null 或您想要的任何默认值.

代码

.state('orderDetail', {
      templateUrl: 'modules/common/orders/partials/detail.html?referrer',
      controller: 'OrderDetailCtrl',
      url: '/detail/:myParam',
      resolve: {
           //resolve code here
      }
      params: {
          'myParam': null
      }
}

To make above changes effective you Should update ui-router version to 0.2.13

Github Issue Link

Answer 2

$stateParams 只接受字符串，但是您可以将对象字符串化为 myParam

$state.go('orderDetail', {myParam: angular.fromJson({accountID: $scope.selectedAccount})})

然后

.state('orderDetail', {
    templateUrl: 'modules/common/orders/partials/detail.html?referrer',
    controller: 'OrderDetailCtrl',
    url: '/detail/:myParam',
    resolve: {
        orderDetails: function (myservice, configService, $stateParams) {
            var referrer = angular.toJson($stateParams.myParam);
            return myservice.getDetail(configService.config('mock_order_detail').url + '?accountId=2233');
        }
    }
});

但我不建议使用字符串化对象，最好使用服务作为状态的桥梁，只是因为丑陋 URL 并且不安全，内部状态必须对我相信的用户隐藏

如何将状态参数传递给 ui-router？

how to pass in state parameter to ui-router?

routing

angularjs

angularjs-routing

angular-ui-router