This is the code for my app's 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', // used 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); } ]);
This is the content of 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 am able to access my "agent" page (a list of people) and my breadcrumb displays correctly as : home / agent
However, when I click on an item from the list, I always end up on the same page but my breadcrumb shows correctly as: home / agent / agentDetail
If I change the detail section in app.router.js like this :
var detail = { name: 'root.detail', // initial reference + detail (child) url: '/agent/detail/:id', // reference used in HTML files, be cautious it's a continuation of the previous URL!!! title: 'agentDetail', // reference used for breadcrumb views: { 'root.sidebar': { templateUrl: "views/main.sidebar.html" }, 'root.container': { templateUrl: "views/partials/agent/list.chantier.html" } } };
I get the correct page (list.chantier.xml) but the breadcrumb is incorrect:
home / agentDetail instead of home / agent / agentDetail
I would like to have the accurate breadcrumb display (home / agent / agentDetail) along with the correct page (list.chantier.html) when clicking on an item from the agent list page (list.container.html)
Thank you in advance for your assistance