我可以使用UI-Router＆amp; amp;将变量传递给控制器​​吗？ UI-S参考？

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;
    }
})

现在，上述配置有效，但问题是每个项目的唯一ID都是一个难以理解的字符串，它留下了诸如＆＃34; / item / -sds43sd_23s＆＃34;等链接。

我想弄清楚的是：   

（1）如何将URL指向项目标题，   

（2）同时也使用项目ID作为获取项目对象数据的主要方法。
  

有没有办法可以将两个变量（项目的ID和项目标题）传递给路由器？

Answer 1

我想说，你的问题有一个解决方案。这个Q＆amp; A应该解决它：How to implement path aliases in ui-router。有working example的链接。

我们需要这个状态定义（完全如上面的代码片段），无论如何都不会限制id（例如Regex Parameters {id：[0-9a-fA-F] {1 ，8}}这会避免传递标题......）

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

下一步是让service能够按标题获取ID

.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