Breadcrumb directive with $route parameter

[Adrien Lecharpentier]

Hello,

I'm also trying to create a breadcrumb directive for my app. Here is the code I've done for the moment:

tlbApp.directive('breadcrumb', function ($location, $route) {
    var breadcrumbDescriptionObject = {
        restrict:'E',
        priority:99,
        replace:true,
        transclude:true,
        templateUrl:'views/breadcrumb.html',
        link:function (_, iElement) {
            var ul = angular.element(iElement.children()[0]);
            var paths = $location.path().split('/');
            var href = "#";
            var path = "";
            angular.forEach(paths, function (item) {
                item=item.trim();
                var last = paths.indexOf(item) == (paths.length - 1);
                if (item=="" || (path[path.length-1]!='/')) {
                    path += '/';
                }
                path += item;
                if($route.routes.hasOwnProperty(path)) {
                    var text = $route.routes[path].breadcrumb || item;
                    href += item + "/";
                    var lnk;
                    if (!last) {
                        lnk = "<li><a href='" + href + "'>" + text + "</a> <span class='divider'>&gt;</span></li>"
                    } else {
                        lnk = "<li class='active'>" + text + "</li>";
                    }
                    this.append(lnk);
                }
            }, ul);
        }
    };
    return breadcrumbDescriptionObject;
});

I've added some info in my $routeProvider: the text I'd like to see in the breadcrumb for each specific page. 

tlbApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl:'views/welcome-page.html',
            breadcrumb:'<i class="icon-home"></i>'
        }).

        when('/event/:id', {

            templateUrl:'views/event-details.html',

            controller:EventDetailController,

            breadcrumb:'Évènement {}'

        }).

        otherwise({redirectTo:'/'});
}]); 

The problem I have is that the $route might be '/event/0' and should match the $route '/event/:id' but there is no way to see that they are the same. The `$route.routes.hasOwnProperty(path)` is a strict match function, could it be possible to find a way to have a 'pattern match function'?

Am I doing it wrong and it's just impossible to continue this way?

Thanks for any help.

-- Adrien

[Michael Bielski]

I'd be interested in what you come up with. I had my own struggles yesterday with breadcrumbs and Pawel was a big help. I suspect that what you are trying to do is more along the lines of what I should have been doing.

[Adrien Lecharpentier]

Hi,

I saw your message before posting mine, but the topic was not really related to breadcrumbs and directives, so I created a new one.

What I have for the moment is some like that : 

for /event.

 - / gives the "home" icon

 - /event gives the "Liste des évènements" text

Those texts come from the $routeProvider configuration.

My problem is that when I select one event in the list, so the $route becomes /event/0 for example, I have : 

when it should have something after the last ">", but as $route.routes.hasOwnProperty doesn't find that /event/0 matches /event/:id it doesn't.

Thanks.

-- Adrien

2012/9/6 Michael Bielski <michael...@yahoo.com>

I'd be interested in what you come up with. I had my own struggles yesterday with breadcrumbs and Pawel was a big help. I suspect that what you are trying to do is more along the lines of what I should have been doing.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

--

--
Adrien Lecharpentier

[Alan Löffler]

Adrien, can you please explain how your beardcrumb works? I can figure it out how it works. It has a file dependency?

[Michael Krone]

Hi,

you could try something like this:

angular.forEach(paths, function (item) {

                item = item.trim();

                var last = paths.indexOf(item) == (paths.length - 1);

                

                if (item == "" || (path[path.length-1] != '/')) {

                    path += '/';

                }

                

                // This checks for integer ID's and appends ":id" to the path

                // in your routing you should do .when('/event/:id' then

                if ((parseFloat(item) == parseInt(item)) && !isNaN(item)) {

                path += ":id";

                } else {

                path += item;

                }

                

                if($route.routes.hasOwnProperty(path)) {

                    var obj = $route.routes[path].breadcrumb;

                    if (obj) {

                   obj.url = item + "/";

                   obj.active = last;

                   scope.items.push(obj);

                    }

                }

            });

[Andy Joslin]

You should check out what angular-app did for a breadcrumbs service.  Dead simple :-)

https://github.com/angular-app/angular-app/blob/master/client/src/common/services/breadcrumbs.js

https://github.com/angular-app/angular-app/blob/master/client/src/app/header.tpl.html#L25