I use angular routing between multiple views and try to populate a common breadcrumb list on each route change. This works fine except that the hyperlinks in the breadcrumb don't work.
Essentially I have a site with the following views:
views/main.html
views/page_a.html
views/page_b.html
and structure:
main > page a > page b
$rootScope.$on('$routeChangeSuccess', function(scope, next, current) {
var thisView = next.loadedTemplateUrl;
if (!thisView) return;
var breadcrumb = jQuery('#breadCrumb'); //<ol> container
breadcrumb.empty();
if (thisView.indexOf('page_a') >= 0) {
breadcrumb.append('<li><a href="#/main">main</a></li>');
breadcrumb.append('<li class="active">page a</li>');
}
else if (thisView.indexOf('page_b') > 0) {
breadcrumb.append('<li><a href="#/main">main</a></li>');
breadcrumb.append('<li><a href="#/page_a">page a</a></li>');
breadcrumb.append('<li class="active">page b</li>');
}
});
unfortunately those hyperlinks doesn't go to the right place. I think I have tried all combinations of e.g. #/page_a, #/page_a.html, /views/page_a.html, ... but no luck. Feel this shouldn't be hard but it's getting late so I hope for some help. Thanks!
EDIT
My routes are set up like:
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/page_a', {
templateUrl: 'views/page_a.html'
})
.when('/page_b', {
templateUrl: 'views/page_b.html'
})
.otherwise({
redirectTo: '/'
});
});
ok, a very stupid mistake and I wouldn't have needed to post this question at all..
Indeed href="#/page_a"
. It works just fine so this was just as easy as expected.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With