Могу ли я передать переменную в контроллер с помощью UI-Router & ui-sref?

Question

Мне было интересно, можно ли передавать несколько переменных через UI-Router, которые будут использоваться в контроллере состояния.

В HTML, у меня есть

<li class="blist-item grid-loader" ng-repeat="item in items"> 
    <a ui-sref="item({ id: {{item.$id}} })"><h3>{{item.title}}</h3></a> 
</li> 

И в конфигурации, у меня есть:

.state('item', { 
     url: '/item/:id', 
     templateUrl: 'templates/single/single-main.html', 
     controller: function($scope, $stateParams){ 
     $scope.item.$id = $stateParams.id; 
    } 
}) 

Теперь вышеуказанные настройки работы, но проблема в том, что каждый элемент уникальный идентификатор является непонятная строка, которая оставляет меня со ссылками, такими как «/ item/-sds43sd_23s».

То, что я пытаюсь выяснить, является:

(1), как иметь URL быть направлены названием пункта,

(2), а также используя идентификатор элемента в качестве основного метода для получения данные объекта объекта.


Есть ли способ передать обе переменные (идентификатор элемента & название предмета) через маршрутизатор?

Answer 1

Я бы сказал, что есть решение для вашей проблемы. Это Q & A должно решить эту проблему: How to implement path aliases in ui-router. Есть ссылка на это working example.

Мы должны были бы это состояние определение (точно, как в приведенном фрагменте) который не ограничивает идентификатор, так или иначе (например, Regex Parameters {идентификатор: [0-9a-FA-F] {1,8}} это позволило бы избежать прохождения название ...)

.state('item', { 
    url: '/item/:id', // no restrcitions, this is what we need 
    ... 

Следующий шаг должен иметь service, который способен получить идентификатор по названию

.factory('ItemSvc', ... 
    // some service, converting title into ID 
    ... 
    var getIdByTitle = function(title){ 
    // some how get the ID for a Title 
    ... 
    } 

Наконец, мы будем использовать функцию UI-Router$urlRouterProvider - .when()

$urlRouterProvider.when(/item\/[a-zA-Z\-]+/, 
    function($match, $state, ItemSvc) { 

    // get the Title 
    var title = $match.input.split('item/')[1]; 
    // get some promise resolving that title 
    // converting it into ID 
    var promiseId = ItemSvc.getIdByTitle(title); 

    promiseId.then(function(id){ 

     // once ID is recieved... we can go to the detail 
     $state.go('item', {id: id}, {location: false}); 
    }) 

    // essential part! this will instruct UI-Router, 
    // that we did it... no need to resolve state anymore 
    return true; 
    } 
); 

Проверить example in action here