anchor href linking with angular routes
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.
jola
Updated on June 14, 2022Comments
-
jola almost 2 years
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: '/' }); });