CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangular-ui
adrenalin
adrenalin

Reputation: 1658

AngularJS ui-router

AngularJS state machine extension ui-router declares a directive that converts routes with attribute ui-sref into href paths and populates it with requested variables. Is there a way to access the same route parser from a scope?

Update

I am looking for a hopefully built-in yet undocumented resolver (or a way to get the same outcome) that gives the path to a named argument. In the spirit of a named route:

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

Which matches a 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 use ! fragment, all the URLs are converted. Directive itself does this already, but its arguments cannot be constructed dynamically.

Upvotes: 3

Views: 1060

Answers (2)

angabriel
angabriel

Reputation: 5048

As of March 2015 I got 'UrlMatcher is not defined' for Chad Robinson's answer. But I succeeded by injecting $urlMatcherFactory and replace urlParams in a ui-router template url.

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

Upvotes: 5

Chad Robinson
Chad Robinson

Reputation: 4623

ui-router provides several services in an API that you can use to do things this. Try one of these 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 convert state names and URL templates into fully formatted URLs. There are additional API calls available as well.

Upvotes: 4

Related Questions