Nested, dynamic paths in Angularjs UI-Router

Question

I have an Angular app, which is a dashboard style app that allows users to drill down n number of levels. I'm trying to set up dynamic paths, which append a new dashboard id every time a user drills down. So for example, the root dashboard will look like this:

/reporting/dashboard/root

Then if a user drills down 4 times, it may look something like this:

/reporting/dashboard/root/dashboard1/dashboard2/dashboard3/dashboard4

I've tried using a regex pattern in my state config to no avail. I can't figure out how to append the path when calling $state.go().

state: 'dashboard',
    config: {
              url:"/reporting/dashboard/{path:.*}",
              templateUrl: function(params) {
                  var path = params.path.split('/').reverse(),
                  var guid = path[0];
                  params.guid = guid;
                  return 'views/dashboard/dashboard.html';
              },
              controller:'DashboardController'
    }

Any help would be greatly appreciated! Maybe there is a better way to accomplish this?

Couldn't you just make Level a parameter such that /reporting/dashboard?level=1&page=users ? — Michael Draper, Aug 12 '15 at 22:37

score 2 · Answer 1 · edited May 23 '17 at 11:51

The way I would suggest to go is in detail described here:

we would need an regex like this *{myPath:[a-zA-Z0-9/]*}*:

state: 'dashboard',
    config: {
              url:"/reporting/dashboard/{myPath:[a-zA-Z0-9/]*}",
              templateUrl: function(params) {
                  var path = params.path.split('/').reverse(),
                  var guid = path[0];
                  params.guid = guid;
                  return 'views/dashboard/dashboard.html';
              },
              controller:'DashboardController'
    }

And as the plunker from above example shows (it is about folder and files) - we can use any kind of links:

<a href="#/reporting/dashboard/root/dashboard1">
<a href="#/reporting/dashboard/root/dashboard1/dashboard2">
<a href="#/reporting/dashboard/root/dashboard1/dashboard2/dashboard3">
<a href="#/reporting/dashboard/root/dashboard1/dashboard2/dashboard3/dashboard4">

and the params will be myPath = 'root/dashboard1/dashboard2/dashboard3/dashboard4' for the last state, so even this would work:

<a ui-sref="dashboard({myPath: 'root/dashboard1/dashboard2/dashboard3/dashboard4'})">

Nested, dynamic paths in Angularjs UI-Router

1 Answers1