0

I'm using AngularJS's ui-router in my webapp. I have a state that looks like this:

  $stateProvider.state('mystate',
    {
      url: '/mystate/{id:int}/:slug',
      params: {
        slug: {value: null, squash: true}
      },
      templateUrl: 'partials/mystate.html',
      controller: 'MyStateCtrl'
    }
  );

I can link to this state in my view like this:

<a ui-sref="mystate({id: 4, slug: 'myslug'})">Hello World</a>

It converts it to the following URL: /mystate/4/myslug/

I want to build the same URL that ui-sref produces, but I want it inside MyStateCtrl. How do I do that? In the controller, I have access to $stateParams.id and $stateParams.slug. But what function do I need to call to convert them to that URL?

EDIT: Please note: I do not want to go to the resultant URL. I just want to have it for later use.

Improve this question

3 Answers 3

Reset to default
1

You can construct a url just like you ui-sref with the function $state.href(). You just need to provide the route and its params that you can get from $stateParams.

e.g. expect($state.href("about.person", { person: "bob" })).toEqual("/about/bob");

So in your case:

$state.href("mystate", { id: $stateParams.id, slug: $stateParams.slug });

And here is the documentation - $state.href()

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You can inject $state as a dependency to MyStateCtrl and use $state.go(to [, toParams] [, options]) function for navigating to target URL.

For example:

class MainController {

  constructor($scope, $state) {
    'ngInject';

    this.scope = $scope;
    this.state = $state;

   }

   navigateToAState() {
     this.state.go('mystate',{id: 4, slug: 'myslug'})
   }
 }

 export default MainController;

Detail Reference: $state.go(to \[, toParams\] \[, options\])

Improve this answer

5 Comments

Thanks! What if I don't want to redirect to that state? I just want to have the URL for some other purpose. Can I do it without $state.go()?
@SaqibAli, yes $state.go will freely take you to the url you want as it identifies a state by given state name.
I don't want to go to that URL. I just want to store that URL and use it for something else. How can I do that??
@SaqibAli, could plz edit your question to reflect what you want to achieve ?
Edited. Thanks. I also found the answer in the link that Vipin Jain posted: $state.href()
1

A url generation method that returns the compiled url for the given state populated with the given params.

Example : expect($state.href("about.person", { person: "bob" })).toEqual("/about/bob");

you can use this

$state.href ('mystate',{id: 4, slug: 'myslug'});

See This link for more help

Improve this answer

3 Comments

Thanks! What if I don't want to redirect to that state? I just want to have the URL for some other purpose. Can I do it without $state.go()?
Yup. You can use for other purpose. i have send a link for it you can see all options angular-ui.github.io/ui-router/site/#/api/… . Look it if any problem add comment
Thanks! I found what I needed at that link: $state.href().

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.