Question

所以这是我的州：

.state('home', {
    url: '/',
    templateUrl: '/components/item-list-view.html',
    controller: 'ItemListCtrl'
})

.state('add-item', {
    url: '/item/add',
    templateUrl: '/components/item-add-view.html',
    controller: 'ItemAddCtrl'
})

.state('view-project', {
    url: '/item/:id',
    templateUrl: '/components/item-view-view.html',
    controller: 'ItemViewCtrl'
});

所以我希望有一个:name而不是:id的slugified版本，所以我会有更漂亮的URL-s，但我还需要检索项目视图的单个项目，但使用slugified名称这样做似乎不是一个好主意。（怎么样）我可以方便地在那里传递身份证明吗？

Answer 1

有a working plunker

我们可以使用 params : {} 来定义这样的参数，这些参数可以传递（例如使用ui-sref）但不部分网址< / p>

.state('view-project', {
    //url: '/item/:id',
    url: '/item/:name',
    params: { id : null },
    templateUrl: 'components/item-view-view.html',
    controller: 'ItemViewCtrl'
});

因此，如果列表视图中包含此项集合：

.controller('ItemListCtrl', ['$scope', function ($scope) { 
  $scope.items = [
    {id : 1, name:"first", description: "The first item name"},
    {id : 2, name:"second", description: "The second item name"},
    {id : 3, name:"third", description: "The third item name"}
    ]
}])

这样可行：

<ul>
    <li ng-repeat="item in items">
      <a ui-sref="view-project({id: item.id, name: item.name})">{{item.description}}</a>
    </li>
</ul>

在action here

中查看

请检查这些，以获取更多详细信息：

Answer 2

检查another version here

如果我们需要使用说明作为参数，并希望像（angular-slugify的简化版本）那样对其进行重击：

.filter('slugify', function () {

    function slugify(input) {
        return input.toString().toLowerCase()
            .replace(/\s+/g, '-')
            .replace(/[^\w\-]+/g, '')
            .replace(/\-\-+/g, '-')
            .replace(/^-+/, '')
            .replace(/-+$/, '');
    }

    return function (input) {

        return slugify(input);

    }

})

我们可以调整控制器：

.controller('ItemListCtrl', ['$scope', '$filter', function ($scope ,$filter) { 
  $scope.items = [
    {id : 1, name:"first", description: "The first item name"},
    {id : 2, name:"second", description: "The second item name"},
    {id : 3, name:"third", description: "The third item name"}
    ]

  $scope.slugify = function(value){
    var result =  $filter('slugify')(value);
    return result;
  }
}])

视图将是：

  <ul>
    <li ng-repeat="item in items">
      <a ui-sref="view-project({id: item.id, name: slugify(item.description)})"
       >{{item.description}}</a>
    </li>
  </ul>

检查here

如何将ID传递给不使用父控制器或URL的状态

2 个答案: