เราเตอร์ AngularJS ui ส่งผ่านข้อมูลระหว่างรัฐที่ไม่มี URL

ฉันกำลังประสบปัญหานี้ในการส่งผ่านข้อมูลระหว่างสองสถานะโดยไม่เปิดเผยข้อมูลใน URL มันเหมือนว่าผู้ใช้ไม่สามารถลงจอดบนสถานะนี้

ตัวอย่างเช่น. ฉันมีสองสถานะคือ "A" และ "B" ฉันกำลังเรียกเซิร์ฟเวอร์ในสถานะ "A" และผ่านการตอบสนองของการเรียกไปยังสถานะ "B" การตอบสนองของการเรียกเซิร์ฟเวอร์เป็นข้อความสตริงซึ่งค่อนข้างยาวดังนั้นฉันไม่สามารถเปิดเผยสิ่งนั้นใน URL ได้

ดังนั้นมีวิธีใดในเราเตอร์ ui เชิงมุมเพื่อส่งผ่านข้อมูลระหว่างอเมริกาโดยไม่ใช้ url params?

เราสามารถใช้params, ใหม่คุณลักษณะของ UI-Router:

API Reference / ui.router.state / $ stateProvider

paramsแผนที่ซึ่งเลือกกำหนดค่าพารามิเตอร์ที่ประกาศใน url หรือกำหนดพารามิเตอร์อื่นที่ไม่ใช่ URL สำหรับแต่ละพารามิเตอร์ที่ถูกกำหนดค่าให้เพิ่มอ็อบเจ็กต์การกำหนดค่าที่คีย์ไปที่ชื่อของพารามิเตอร์

ดูที่ส่วน: " ... หรือกำหนดพารามิเตอร์ที่ไม่ใช่ URL เพิ่มเติม ... "

ดังนั้นสถานะ def จะเป็น:

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

ตัวอย่างไม่กี่รูปแบบเอกสารดังกล่าวข้างต้น :

// 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 - ตัวอย่างการทำงาน: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

นี่คือตัวอย่างของคำนิยามของรัฐ:

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

นี่อาจเป็นการโทรโดยใช้ 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>

ตรวจสอบตัวอย่างที่นี่

วัตถุ params รวมอยู่ใน $ stateParams แต่จะไม่เป็นส่วนหนึ่งของ url

1) ในการกำหนดค่าเส้นทาง:

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

2) ในตัวควบคุม:

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

3A) การเปลี่ยนสถานะจากคอนโทรลเลอร์

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

3B) การเปลี่ยนสถานะเป็น html

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

ตัวอย่างพลั่ว