angular-ui-router : breadcrumps ok but view ko

Question

this is my app.router.js :

 agentRouter.config([ '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { var root = { name: 'root', abstract: true, url: '', title: 'home', views: { 'header': { templateUrl: 'views/headers/header.app.html', controller: 'HeaderCtrl' }, 'body': { templateUrl: "views/root.html" }, 'footer': { templateUrl: 'views/footers/footer.app.html' } } }; var agent = { name: 'root.agent', url: '/agent', title: 'agent', views: { 'root.sidebar': { templateUrl: "views/main.sidebar.html" }, 'root.container': { templateUrl: "views/partials/agent/list.container.html" } } }; var detail = { name: 'root.agent.detail', url: '/detail/:id', title: 'agentDetail', // use for breadcrumb views: { 'root.sidebar': { templateUrl: "views/main.sidebar.html" }, 'root.container': { templateUrl: "views/partials/agent/list.chantier.html" } } }; /.../ $stateProvider.state(root); $stateProvider.state(agent); $stateProvider.state(detail); } ]); 

and this is my root.html :

<!--Breadcrumb content-->

<ul class="row breadcrumb">
    <i class="glyphicon glyphicon-home" style=""></i>
    <li ng-repeat="state in $state.$current.path">
        <a ng-href="#{{state.url.format($stateParams)}}"><span ng-bind="state.title"></span></a>
        <span ng-hide="$last" class=""></span>
   </li>
</ul>

 <!--Sidebar content-->
 <div ui-view="root.sidebar">default root.sidebar</div>

    <!--Container content-->
   <div style="background-color: #f9f9f9" ui-view="root.container">default root.container</div>

I can access to my "agent" page (a list of person) and my breadcrumb is right : home / agent

but when i click on an item of the list i got always the same page but my breadcrumb is right : home / agent / agentDetail

but in app.router.js if change detail like this :

var detail = { name: 'root.detail', // référence initiale + detail (fils) url: '/agent/detail/:id', // réference utilisée dans les fichiers HTML, attention c'est la suite de l'url précédente!!! title: 'agentDetail', // référence utilisée pour le breadcump views: { 'root.sidebar': { templateUrl: "views/main.sidebar.html" }, 'root.container': { templateUrl: "views/partials/agent/list.chantier.html" } } };

i got the right page (list.chantier.xml) but the breadcrumb is false :

home / agentDetail instead of home / agent / agentDetail

I would like to got the right breadcrumb (home / agent / agentDetail) with the right page (list.chantier.html) when i click on an item of the agent list page (list.container.html)

Thank you in advance for your help

Answer 1

by renaming the state to 'root.detail' you attach the detail state to the root state. So it's normal to have 'home / agentDetail' in the breadcrumb.

Take a look on angular-breadcrumb module. Among interesting features (like interpolation in breadcrumb's labels), there is an option to change the parent of the state (only for the breadcrumb).