1

I have a simple users.list state, configured like this:

$stateProvider.state('users.list', {
  url: '/users/list?type',
  reloadOnSearch: false,
  templateUrl: 'templates/users/list.html',
  params: {
    type: { value: 'all' },
  },
});

I'm trying to force the type param to always appear in the URL. When I click on a link generated by the ui-sref directive, it works great. The problem happens when I access /users/list directly in the browser. Although the param is correctly configured into $state.params, it does not appear in the URL.

Usually that's not a big problem, but it becomes one when you need to use seasonal params. For instance, imagine that, by default, I want to only list new users, registered from the past week until now. I could do that setting a param from with the default value of today - 7 days, which would be different every day.

So, when the user shares the url without the param with someone, it can cause a lot of trouble, like: "Hey, delete the third one from the top for me, it's cheating.". If the person who receives the message decides to open the url in another day, the list will be different, and you can see what I'm worried about.

I couldn't find anything that could help me, so I'm asking here. Have anyone done that? Is it feasible?

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
Denis Lins
  • 816
  • 7
  • 22

2 Answers2

1

There is a working plunker

We just have to use setting squash:

.state('users.list', {
  url: '/users/list?type',
  reloadOnSearch: false,
  templateUrl: 'templates/users/list.html',
  params: {
    type: {
      value: 'all',
      squash: false,
    },
  },
});

Check it here

For more details observe these:

EXTEND (updated working plunker)

In case, that we want the initial page to be also using the defaults, we can use this .otherwise() setting:

//$urlRouterProvider.otherwise('/users/list');
$urlRouterProvider.otherwise(function($injector, $location) {
    var state = $injector.get('$state');
    state.go('users.list');
    return $location.path();
});

Check that in action here and read more details here:

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • I don't think it worked... What I'm trying to do, is make the type value go automatically to the URL, even when the URL is accessed directly. I changed your plunker to redirect to `/users/list` by default, so you can see that the type param is not in the URL: http://plnkr.co/edit/HvSu6u7WzlaWneTc6yhJ?p=preview – Denis Lins Jul 07 '15 at 18:14
  • 1
    I fixed that plunker, extended the answer, and provided a link to more details. Hope it helps a bit ;) – Radim Köhler Jul 07 '15 at 18:22
  • Yes, this is exactly the behavior I want! The only problem is, since the solution involves the otherwise event, and I want to do this in many states, I have to figure out some way to make this work for all of them. In fact, I was hoping that this would be some configuration option that I couldn't find... – Denis Lins Jul 07 '15 at 18:41
0

I would suggest simply making another state without state parameter in URL, with onEnter function redirecting to state with required parameter filled.

Artur Kulig
  • 501
  • 4
  • 4