Как передать аргумент в router-ui Angularjs, не показывая в URL? - PullRequest
Новая
       9

Как передать аргумент в router-ui Angularjs, не показывая в URL?

0 голосов
/ 19 октября 2018

У меня есть приложение AngularJS, которое использует ui-router для управления состояниями моего приложения и маршрутизацией URL.

Вот пример состояния: 

.state('my_state', {
    url: '/my_state/:arg1',
    templateUrl: 'http://www.example.com/html/my_file.html',
    controller: 'MyCtrl'
})

Здесьэто контроллер: 

app.controller('MyCtrl', function($stateParams) {
    console.log('arg1 = ', $stateParams.arg1)     
);

Вот как я отправляю людей на него из другого контроллера: 

$state.go('my_state', {'arg1': 'hello'});

Когда выполняется строка $state.go выше, меня отправляют на этоURL /my_state/hello и я вижу следующее, напечатанное в окне отладки браузера: 

arg1 = hello

Теперь вот мой вопрос: могу ли я добавить еще один аргумент к этому контроллеру, такой:

  1. Он называется arg2.
  2. Это необязательно.
  3. Если имеется, к нему можно получить доступ внутри MyCtrl.
  4. Не отображается в URL.

Если это так, пожалуйста, покажите мне, как.

Ответы [ 4 ]

0 голосов
/ 22 октября 2018 
Using Parameters without Specifying Them in State URLs

Вы все еще можете указать, какие параметры получать, даже если они не отображаются в URL.Вам необходимо добавить новое поле params в состояние и создать ссылки, как указано в разделе Использование параметров в ссылках

Например, у вас есть состояние. 

.state('contacts', {
        url: "/contacts",
        params: {
            param1: null
        },
        templateUrl: 'contacts.html'
    })

Ссылка, которую вы создаете, 

<a ui-sref="contacts({param1: value1})">View Contacts</a>

Или вы можете передать их $state.go(). 

$state.go('contacts', {param1: value1})
0 голосов
/ 19 октября 2018

Попробуйте это: 

.state('my_state', {
    url: '/my_state',
    templateUrl: 'http://www.example.com/html/my_file.html',
    controller: 'MyCtrl',
    params: null
})
0 голосов
/ 21 октября 2018

Параметры маршрута в UI Router являются необязательными по умолчанию. Например, ваш код (следующий) говорит, что arg1 является необязательным параметром.Так что /my_state/:arg1 и /my_state/ будут работать, но не /my_state (без косой черты).Он также показывает значение arg1 в URL. 

.state('my_state', {
    url: '/my_state/:arg1',
    templateUrl: 'http://www.example.com/html/my_file.html',
    controller: 'MyCtrl'
})

Вы можете добавить другой необязательный аргумент к этому контроллеру со своими предпочтениями: 

.state('my_state', {
    url: '/my_state/:arg1',
    templateUrl: 'http://www.example.com/html/my_file.html',
    controller: 'MyCtrl',
    params: {
        arg2: { value: null }
    }
})

Чтобы скрыть параметры , вы должны определить их в params.

Обратите внимание, что свойство squash (внутри params) настраивает как значение по умолчаниюзначение параметра представляется в URL , если текущее значение параметра совпадает со значением по умолчанию .Если сквош не установлен, он использует настроенную политику сквоша по умолчанию.

Рабочий плункер

Обновление

Другой Рабочий плункер , который использует $state.go('my_state', {'arg1': 'hello', 'arg2': 'world'}); внутри контроллера.

Обратите внимание, что не существует функциональной разницы между ui-sref и $state.go для Активациясостояние

0 голосов
/ 19 октября 2018 
.state('someState', {
            url: '/my_state?arg1',
            templateUrl: 'http://www.example.com/html/my_file.html', // I assume this is correct for the way you set it up.
            controller: 'MyCtrl',
            params: { // This is the part you'll add
                arg2: {
                    value: null, // you can set a default value
                    squash: true
                }
            }
})

Это должно помочь вам!Я использовал это много раз!Очень полезно.

...