จะส่งวัตถุเข้าสู่สถานะโดยใช้เราเตอร์ UI ได้อย่างไร


119

ฉันต้องการเปลี่ยนสถานะและส่งผ่านวัตถุโดยพลการโดยใช้ ui-router

ฉันทราบว่าโดยปกติ$stateParamsจะใช้ แต่ฉันเชื่อว่าค่านี้ถูกแทรกลงใน URL และฉันไม่ต้องการให้ผู้ใช้สามารถบุ๊กมาร์กข้อมูลนี้ได้

ฉันต้องการทำสิ่งนี้

$state.transitionTo('newState', {myObj: {foo: 'bar'}});

function myCtrl($stateParams) {
   console.log($stateParams.myObj); // -> {foo: 'bar'}
};

มีวิธีดำเนินการโดยไม่เข้ารหัสค่าลงใน URL หรือไม่


1
กลไก ui-router รักษาสถานะ URL ในการนำทาง ดังนั้นหากผู้ใช้รีเฟรชเพจเขาจะกลับมาที่เพจที่เขาอยู่หากคุณไม่ต้องการใช้พฤติกรรมนี้ให้พิจารณาใช้ mecanisms อื่น ๆ (ฟังก์ชั่นดิบในตัวควบคุม / คำสั่งของคุณ ฯลฯ ) และใช้คุกกี้ / พื้นที่จัดเก็บข้อมูลชั่วคราว
Neozaru

ใช้ localStorage กับ url เป็นกุญแจสำคัญสำหรับข้อมูลของคุณหรือไม่?
Neil

2
ค่านิยมมาจากไหน? Ui.router มีแนวคิดในการ "แก้ไข" เพื่อโหลดข้อมูลลงในขอบเขตก่อนที่จะเปลี่ยนไปสู่สถานะที่ร้องขอ ในทำนองเดียวกันมีเมธอด onEnter และ onExit นอกจากนี้คุณสามารถใช้ที่จัดเก็บในตัวเครื่อง
Josh C.

ในฐานะ @JoshC. กล่าวแล้วดูเหมือนว่าคุณอาจต้องการพิจารณาการแก้ไขข้อมูลก่อนที่จะย้ายไปอยู่ในสถานะ github.com/angular-ui/ui-router/wiki#resolve
TrazeK

ดูคำตอบของ stackOverlord ว่าทำอย่างไรให้เป็นทางการ
AlikElzin-kilaka

คำตอบ:


163

ในเวอร์ชัน 0.2.13 คุณควรจะสามารถส่งผ่านวัตถุไปยัง $ state.go,

$state.go('myState', {myParam: {some: 'thing'}})

$stateProvider.state('myState', {
                url: '/myState/{myParam:json}',
                params: {myParam: null}, ...

จากนั้นเข้าถึงพารามิเตอร์ในคอนโทรลเลอร์ของคุณ

$stateParams.myParam //should be {some: 'thing'}

myParam จะไม่ปรากฏใน URL

ที่มา:

ดูความคิดเห็นโดย christopherthielen https://github.com/angular-ui/ui-router/issues/983ทำซ้ำที่นี่เพื่อความสะดวก:

christopherthielen: ใช่ตอนนี้ควรจะใช้งานได้ใน 0.2.13

.state ('foo', {url: '/ foo /: param1? param2', params: {param3: null} // null คือค่าเริ่มต้น});

$ state.go ('foo', {param1: 'bar', param2: 'baz', param3: {id: 35, name: 'what'}});

$ stateParams ใน 'foo' ตอนนี้คือ {param1: 'bar', param2: 'baz', param3: {id: 35, name: 'what'}}

url คือ / foo / bar? param2 = baz


ใช้งานได้transitionToเช่นกัน
AlikElzin-kilaka

13
ฉันต้องทำอะไรผิด: - / ฉันอยู่ที่ 0.2.13 แต่ถ้าฉันพยายามที่จะผ่านและคัดค้านมันจะออกมาในสถานะเป็นสตริง[object Object]
ErichBSchulz

15
@ErichBSchulz แม้ว่าจะไม่รวมอยู่ในคำตอบนี้ แต่เคล็ดลับในการทำงานนี้คือการใส่ชื่อพารามิเตอร์ในสตริง URL ของรัฐและระบุประเภทเป็น JSON อดีต $stateProvider.state('myState', { url: '/myState/{myParam:json}', params: {myParam: null},...ดูบันทึกย่อประจำรุ่น 0.2.13และข้อคิดเห็นเกี่ยวกับรหัสสำหรับคุณลักษณะนี้
Syon

1
ฉันมีพารามิเตอร์ id ใน URL ของฉันและต้องเพิ่มสิ่งนั้นลงในออบเจ็กต์ params ด้วย { url: '/mystate/{id:[0-9]+}', params: { id: null, myParam: null }, ...
GraehamF

3
ต้องมีมนต์ดำอยู่บ้าง - json ทั้งหมดของฉันกำลังแสดง url: (((
Kabachok

25

ปัญหานี้มีสองส่วน

1) การใช้พารามิเตอร์ที่จะไม่แก้ไข url (โดยใช้คุณสมบัติ params):

$stateProvider
    .state('login', {
        params: [
            'toStateName',
            'toParamsJson'
        ],
        templateUrl: 'partials/login/Login.html'
    })

2) การส่งผ่านวัตถุเป็นพารามิเตอร์: ตอนนี้ไม่มีวิธีโดยตรงในการทำเช่นนี้เนื่องจากทุกพารามิเตอร์ถูกแปลงเป็นสตริง ( แก้ไข : ตั้งแต่ 0.2.13 สิ่งนี้ไม่เป็นความจริงอีกต่อไป - คุณสามารถใช้วัตถุได้โดยตรง) แต่ คุณสามารถแก้ปัญหาได้โดยการสร้างสตริงด้วยตัวคุณเอง

toParamsJson = JSON.stringify(toStateParams);

และในตัวควบคุมเป้าหมาย deserialize วัตถุอีกครั้ง

originalParams = JSON.parse($stateParams.toParamsJson);

1
จริงๆแล้วสำหรับการส่งผ่านวัตถุนี่เป็นการแฮ็กที่ดีทีเดียว :)
Tek

เราสามารถส่งผ่านวัตถุได้โดยตรง ตรวจสอบคำตอบที่ยอมรับ
Kishore Relangi

20

จริงๆแล้วคุณสามารถทำได้

$state.go("state-name", {param-name: param-value}, {location: false, inherit: false});

นี่คือเอกสารอย่างเป็นทางการเกี่ยวกับตัวเลือกใน state.go

ทุกอย่างอธิบายไว้ที่นั่นและอย่างที่คุณเห็นนี่คือวิธีที่ต้องทำ


ฉันลองใช้รหัสที่ถูกต้องนี้และวัตถุไม่ได้รับการเก็บรักษาไว้
Virmundi

1
คุณไม่สามารถส่งผ่านวัตถุได้คุณสามารถส่งผ่านค่าพารามิเตอร์เดียวเท่านั้น .... คุณทำให้เป็นวัตถุคุณต้องใส่คุณสมบัติทั้งหมดเป็นพารามิเตอร์ url ที่แตกต่างกัน Angular-ui-router devs ยังคงทำงานในการส่งผ่านวัตถุทั้งหมด จริงๆแล้วพวก Svatopluk Ledl ให้ทางออกที่ดี เพียงแค่ทำให้วัตถุเป็นสตริง json ทั้งหมดและหลังจากนั้นแยกวิเคราะห์ :)
เต็ก

13

Btw คุณยังสามารถใช้แอตทริบิวต์ ui-sref ในเทมเพลตของคุณเพื่อส่งผ่านวัตถุ

ui-sref="myState({ myParam: myObject })"

1
เราจะได้รับวัตถุนี้อย่างไรใน. state
Shubham

@Shubham คุณจะกำหนดค่า 'พารามิเตอร์' สำหรับสถานะที่จะรับวัตถุจากนั้นใช้ $ stateParams เพื่อดึงข้อมูลวัตถุนั้น ดูรายละเอียดได้ที่doc angular-ui.github.io/ui-router/site/#/api/…
tao

ใช้งานได้ แต่ไม่สามารถเก็บข้อมูลไว้ได้หลังจากรีเฟรชหน้า
tao

9

1)

$stateProvider
        .state('app.example1', {
                url: '/example',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/example.html',
                        controller: 'ExampleCtrl'
                    }
                }
            })
            .state('app.example2', {
                url: '/example2/:object',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/example2.html',
                        controller: 'Example2Ctrl'
                    }
                }
            })

2)

.controller('ExampleCtrl', function ($state, $scope, UserService) {


        $scope.goExample2 = function (obj) {

            $state.go("app.example2", {object: JSON.stringify(obj)});
        }

    })
    .controller('Example2Ctrl', function ($state, $scope, $stateParams) {

        console.log(JSON.parse($state.params.object));


    })

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.