How to pass an ID to a state not using a parent controller or the URL

Question

So here are my states:

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

So I would like to have a slugified version of :name instead of the :id, so I would have prettier URL-s, but I also need to retrieve a single item for the item-view, but doing that using a slugified name does not seem like a good idea. (How) can I conveniently pass an id there?

if you pass :name then /item/add and /item/:name will be no different. So it wont work — simon, Jun 16 '15 at 04:35
@simon, why it will not work ? if you have /item/first then it will still go to /item/:name and not /item/add — kwangsa, Jun 16 '15 at 04:55
yup, but if you looking at the order then /item/add will be evaluate first before /item/:name — kwangsa, Jun 16 '15 at 05:48

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

There is a working plunker

We can use params : {} to define such params, which could be passed (e.g. with ui-sref) but are not part of url

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

So, if the list view would have this items collection:

.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"}
    ]
}])

This would work:

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

Check it in action here

Please, also check these, to get more details:

edited May 23 '17 at 12:07

Community

1
1

answered Jun 16 '15 at 05:44

Radim Köhler

122,561
47
239
335

This works as expected, thanks! How would I add a filter to the param though? I would like to slugify the name, but `view-project({ name: project.name | slugify, id: project.id })` gives me this: `Error: [$parse:syntax] Syntax Error: Token '|' is unexpected` – Jun 16 '15 at 07:23
I am ready to assist, @Sergo, but not sure what do you mean by nam | slugify.. could you take my plunker and change it? to show what is the problem (and give me a bit more details what it should do) Does it make sense? – Radim Köhler Jun 16 '15 at 08:42
I added the slugify filter there: http://plnkr.co/edit/kECYuZUKJMoAZhCdGL9r?p=preview – Jun 16 '15 at 08:50
I added more details, about some way - we can use. Hope it helps ;) – Radim Köhler Jun 16 '15 at 09:01

score 0 · Accepted Answer · answered Jun 16 '15 at 09:00

Check another version here

In case, that we need to use description as a parameter and would like to slugify it like this (simplified version of 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);

    }

})

We can adjust our controller:

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

And the view would be:

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

Check it here

How to pass an ID to a state not using a parent controller or the URL

2 Answers2