AngularJS ui-router

Question

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.

github.com/angular-ui/ui-router/blob/… Line 3432 is where that directive is declared. You might be able to access it through ui.router.state.uiSref, passing in custom link options, but I've never seen it done. Are you looking to run, essentially, the link function programmatically? — Tom A
– Tom A, Commented Sep 16, 2014 at 14:32
This determines now the rest of the approach. I have a role-based user privileges and I would like to set e.g. the navigation links in controllers rather than hiding and revealing them in a HTML template, which is the design choice ui-router directs to if I want to use its directives. — adrenalin
– adrenalin, Commented Sep 16, 2014 at 14:36
In that case, the route I would use would be setting navigation etc through $rootScope variables modified in a permissions service. Maybe explore that? It's all still presentation-layer security, but I think you might find it less trouble to work with. — Tom A
– Tom A, Commented Sep 16, 2014 at 14:38
Thanks for the suggestion. It still exactly doesn't tackle the convenience of dynamic URL paths that ui-router gives. I could live with a CSS class toggling even though it hurts me a bit. And since this system is all API based when passing any information, API itself has to be the bulletproofed part, since all AngularJS code is anyway world readable, being just a set of static JS files. — adrenalin
– adrenalin, Commented Sep 16, 2014 at 14:39

angabriel · Accepted Answer · 2015-03-07 14:00:47Z

5

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

answered Mar 7, 2015 at 14:00

angabriel

5,0582 gold badges37 silver badges37 bronze badges

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

Comments

Chad Robinson · Accepted Answer · 2014-09-16 15:26:15Z

3

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.

edited Sep 16, 2014 at 15:26

answered Sep 16, 2014 at 14:52

Chad Robinson

4,61325 silver badges27 bronze badges

6 Comments

adrenalin Over a year ago

Yes, I found this as well, but it doesn't work as ui-sref does. ui-sref eats named routes (which accepts stuff like this: management.person({personId: 1}) and outputs a href that matches a named route), here I would need to define the route path and set arguments, which isn't one bit better than creating the URL by hand by setting the arguments.

Chad Robinson Over a year ago

Your question asked for "a call that gives the path to a named argument." The above code does precisely that. Please clarify your question with a specific example of what you're trying to do. If you're just objecting to the UrlMatcher and path, and want to use a state name - that's just the example. Try $state.href() if you want to supply a state name and params instead of a path. All of these are documented in the URL I supplied above.

adrenalin Over a year ago

I just did so, actually. If $state.href accepts named states, that would be the perfect solution.

Chad Robinson Over a year ago

Here's the direct URL for that reference: github.com/angular-ui/ui-router/wiki/…

adrenalin Over a year ago

Indeed it does. This answer, though, answers now an outdated question after my updates. If you wish to create a new answer, I'd be happy to accept it.

|

Collectives™ on Stack Overflow

AngularJS ui-router

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related