CODEWITHSUNDEEP
javascriptangularjsngrouteangularjs-ng-route
SpooXter
SpooXter

Reputation: 119

Build breadcrumbs with custom names

I'm trying to make my own breadcrumbs service for a web app I'm coding. The only issue is that I want to have custom names for the breadcrumbs, as in their names are not going to be in the path. One idea I have is to replace all <a ng-href="/home"> with <a ng-click="goTo('/home', 'Home')">, for example.

One thing I'm afraid of is the back button for the browser though. It screws things up, I am trying to think of a possible solution with a listener for a $routeChangeSuccess. My service currently looks like this (it's a bit of a mess):

portalServices.factory('breadcrumbsService', ['$rootScope', '$location', function($rootScope, $location) {

var breadcrumbs = [];

var update = function(name, path) {

    $location.path(path);

    for (var index = 0; index < breadcrumbs.length; index++) {
        if (breadcrumbs[index].path == path) {
            breadcrumbs = breadcrumbs.splice(index + 1);
            break;
        };
    };

    breadcrumbs.push({name: name, path: path});
};


return breadcrumbs;

I'm planning to have any controller that has buttons that allow for a change of route to implement the service and to have ng-clicks to do the routing instead of hrefs. I'm also open to suggestions for better solutions.

Edit: fixed a newbie mistake :P

Upvotes: 3

Views: 209

Answers (1)

Sudharsan S
Sudharsan S

Reputation: 15393

Your Function not works because you defined var index=0 in for loop. but you wrongly iterate with i in all places instead of index. your code should be

for (var i = 0; i < breadcrumbs.length; i++) {
        if (breadcrumbs[index].path == path) {
            breadcrumbs = breadcrumbs.splice(index + 1);
            break;
        };
    };

Upvotes: 2

Related Questions