Bộ định tuyến AngularJS ui truyền dữ liệu giữa các trạng thái không có URL

Tôi đang đối mặt với vấn đề truyền dữ liệu giữa hai trạng thái mà không để lộ dữ liệu trong url, có vẻ như người dùng không thể thực sự trực tiếp đến trạng thái này.

Ví dụ. Tôi có hai trạng thái "A" và "B". Tôi đang thực hiện một số cuộc gọi máy chủ ở trạng thái "A" và chuyển phản hồi của cuộc gọi sang trạng thái "B". Phản hồi của cuộc gọi máy chủ là một thông báo chuỗi, khá dài, vì vậy tôi không thể để lộ nó trong url.

Vì vậy, có cách nào trong bộ định tuyến ui góc để truyền dữ liệu giữa các trạng thái, mà không sử dụng thông số url?

Chúng tôi có thể sử dụng params, tính năng mới của UI-Router:

Tham chiếu API / ui.router.state / $ stateProvider

paramsBản đồ tùy chọn cấu hình các tham số được khai báo trong url hoặc xác định các tham số không phải url bổ sung. Đối với mỗi tham số đang được cấu hình, thêm một đối tượng cấu hình được khóa vào tên của tham số.

Xem phần: " ... hoặc xác định các tham số không phải url bổ sung ... "

Vì vậy, def nhà nước sẽ là:

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { hiddenOne: null, }
  })

Một vài ví dụ hình thành tài liệu được đề cập ở trên :

// define a parameter's default value
params: {
  param1: { value: "defaultValue" }
}
// shorthand default values
params: {
  param1: "defaultValue",
  param2: "param2Default"
}

// param will be array []
params: {
  param1: { array: true }
}

// handling the default value in url:
params: {
  param1: {
    value: "defaultId",
    squash: true
} }
// squash "defaultValue" to "~"
params: {
  param1: {
    value: "defaultValue",
    squash: "~"
  } }

EXTEND - ví dụ hoạt động: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

Dưới đây là một ví dụ về định nghĩa trạng thái:

 $stateProvider
  .state('home', {
      url: "/home",
      params : { veryLongParamHome: null, },
      ...
  })
  .state('parent', {
      url: "/parent",
      params : { veryLongParamParent: null, },
      ...
  })
  .state('parent.child', { 
      url: "/child",
      params : { veryLongParamChild: null, },
      ...
  })

Đây có thể là một cuộc gọi sử dụng ui-sref:

<a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  })">home</a>

<a ui-sref="parent({ 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  })">parent</a>

<a ui-sref="parent.child({
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  })">parent.child</a>

Kiểm tra ví dụ ở đây

Đối tượng params được bao gồm trong $ stateParams, nhưng sẽ không phải là một phần của url.

1) Trong cấu hình tuyến đường:

$stateProvider.state('edit_user', {
    url: '/users/:user_id/edit',
    templateUrl: 'views/editUser.html',
    controller: 'editUserCtrl',
    params: {
        paramOne: { objectProperty: "defaultValueOne" },  //default value
        paramTwo: "defaultValueTwo"
    }
});

2) Trong bộ điều khiển:

.controller('editUserCtrl', function ($stateParams, $scope) {       
    $scope.paramOne = $stateParams.paramOne;
    $scope.paramTwo = $stateParams.paramTwo;
});

3A) Thay đổi trạng thái từ bộ điều khiển

$state.go("edit_user", {
    user_id: 1,                
    paramOne: { objectProperty: "test_not_default1" },
    paramTwo: "from controller"
});

3B) Thay đổi trạng thái trong html

<div ui-sref="edit_user({ user_id: 3, paramOne: { objectProperty: 'from_html1' }, paramTwo: 'fromhtml2' })"></div>

Ví dụ Plunker