I use angular routing between multiple views and try to populate a mon 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 binations 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: '/'
});
});
I use angular routing between multiple views and try to populate a mon 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 binations 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: '/'
});
});
Share
Improve this question
edited Jan 10, 2018 at 6:17
HDJEMAI
9,80048 gold badges76 silver badges98 bronze badges
asked Dec 11, 2015 at 21:48
jolajola
1,1152 gold badges13 silver badges34 bronze badges
2
- how are your routes set up? views are not routes – Jorg Commented Dec 11, 2015 at 22:27
- #/main is a route that doesn't exists when configuring your routes. Either change your link to "#/" or your route to "#/main" – Lucas Rodriguez Commented Dec 11, 2015 at 22:50
1 Answer
Reset to default 12ok, 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.