Open EisenbergEffect opened 9 years ago
So, as mentioned briefly via Twitter, I work on an in-house application where we use ui-router for client-side routing, and we dynamically display breadcrumbs in the UI.
I created a directive to encapsulate the breadcrumbs functionality and this required some extensions to ui-router via the data object (I think this is the supported / recommended way to define extra data relating to a state).
So this is the relevant function from my breadcrumbs directive. My directive hooks into the $stateChangeSuccess
event and calls deriveBreadcrumbs
(passing toState
as the parameter):
// attempts to work out what we should display in breadcrumbs for the supplied state
var deriveBreadcrumbs = function (state) {
// see if we can split the state
var breadcrumbs = [];
while (state) {
// push the statename onto the breadcrumbs stack
if (state.data && state.data.breadcrumb === true) {
var stateName = state.name;
var displayName = state.data.displayName ? state.data.displayName : stateName;
if (state.data.breadcrumbProxyState) {
// use the proxy to determine the generated URL
var proxyState = $state.get(state.data.breadcrumbProxyState);
if (proxyState)
stateName = proxyState.name;
}
breadcrumbs.push({ name: $interpolate(displayName)($state.$current.locals.globals), state: stateName });
}
// strip out the child state
var index = state.name.lastIndexOf('.');
if (index < 0)
state = undefined;
else
state = $state.get(state.name.substring(0, index));
}
scope.breadcrumbs = breadcrumbs.reverse();
};
The key things for us are that states are already hierarchical, which fits well with trying to construct some meaningful breadcrumbs. The caveats are that:
{{contact.forename}} {{contact.lastname}}
where contact
is resolved via an API call.I'm not sure if this information helps, but hopefully it sheds some light on some of the strange edge cases that we might be looking for in a new routing solution. Even if both of those issues couldn't be solved 'out of the box', as long as there's enough flexibility to work around it in a similar way then we'd be more than happy with that given the other anticipated benefits of moving to this router when it's available for 1.3!
Another related module that does breadcrumbsfor UI-Router fairly well: https://github.com/ncuillery/angular-breadcrumb
Enable the navigation model to support breadcrumb UI generation.