Угловой ui-маршрутизатор, передающий данные между состояниями без URL-адреса

Question

Я столкнулся с этой проблемой передачи данных между двумя состояниями, не подвергая данные в URL-адресе, так как пользователь не может реально напрямую приземлиться на это состояние.

Например. У меня есть два состояния «A» и «B». Я делаю вызов сервера в состоянии «A» и передаю ответ на вызов , чтобы указать «B». Ответ на вызов сервера - это строковое сообщение, которое довольно длинное, поэтому я не могу разоблачить это в URL-адресе.

Так можно ли в угловом ui маршрутизаторе передавать данные между состояниями, не используя параметры url?

Answer 1

Мы можем использовать params, новую функцию из UI-маршрутизатора:

API Reference/ui.router.state/$stateProvider

params A map which optionally configures parameters declared in the url, or defines additional non-url parameters. For each parameter being configured, add a configuration object keyed to the name of the parameter.

Смотрите часть: "... или определяет дополнительные параметры, не URL-адрес ... "

Так что состояние четкости будет:

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

Несколько примеров образуют doc mentioned above:

// 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: "~" 
    } } 

ПРОДЛИТЕ - рабочий пример: 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, }, 
     ... 
    }) 

Это может быть вызов, используя пользовательский интерфейс -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> 

Посмотрите пример here

Answer 2

Объект 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> 

Example Plunker