Clever Geek Handbook

AngularJS ui-router

The AngularJS ui-router state machine extension declares a directive that transforms routes with an attribute ui-sref

in path href

and populates them with the requested variables. Is there a way to access a single route parser from a scope?

Update

I'm looking for a reliable built-in but undocumented resolver (or a way to get the same result) that gives the path to a named argument. In the spirit of the named route:

<a ui-sref="management.person({personId: 1})" />

What fits the route

$stateProvider.state('management', {
  url: '/absolute/part'
});

$stateProvider.state('management.person', {
  url: '/relative/part/:personId'
});

and outputs #/absolute/part/relative/part/1

- and in case I switch to using snippet !

all urls are converted. The directive itself does this already, but its arguments cannot be constructed dynamically.

+3


source to share


2 answers


ui-router provides several services in the API that you can use to do this. Try one of the following examples:

From http://angular-ui.github.io/ui-router/site/#/api/ui.router.state . $ state

var url = $state.href('about-person', {
    person: "bob"
});


From http://angular-ui.github.io/ui-router/site/#/api/ui.router.router . $ urlRouter

var url = $urlRouter.href(new UrlMatcher("/about/:person"), {
    person: "bob"
});

These two patterns translate state names and URL patterns into fully formatted URLs. Additional APIs are also available.

+4


source


As of March 2015, I got 'UrlMatcher is not defined'

Chad Robinson's answer. But I managed to inject $urlMatcherFactory

and replace urlParams in the url of the ui-router template.



$urlMatcherFactory.compile("/about/:person").format({
    person: "bob"
})
+5


source






More articles:


All Articles