ui-states automated breadcrumbs, best practice !?

[Bernd Wessels]

Hello,

I am using the awesome ui-states router in my project. It is fantastic !!!

Today I added breadcrumbs to my project and wanted the breadcrumbs to be automated.

Automated means, that based on the current route, the breadcrumbs should update their titles and routes with the correct parameters.

Here is what I came up with:

        <ul class="breadcrumb">

            <li ng-repeat="state in $state.$current.path">

                <a href="#{{$state.$current.path[$index].url.format($stateParams)}}">{{state.data.title}}</a>

                <span ng-hide="$last" class="divider">/</span>

            </li>

        </ul>

I would love some feedback on this. Maybe there is even a simpler way?

To clarify, I don't use programmatic transition because I try to keep everything in my project bookmarkable.

Best regards

Bernd

[Peter Bacon Darwin]

You could probably make this into a reusable widget directive. In the meantime you can simplify your html...

<a href="#{{state.url.format($stateParams)}}">{{state.data.title}}</a>

... sent from my tablet

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Bernd Wessels]

Hi Peter

Thank you for the hint. I can probably put it into a directive, even though it is already pretty simple ;)

Is there already an "official" place where people can contribute useful directives to the community?

Best regards

Bernd

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/oyReJon6iQ0/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Nathan Smith]

http://ngmodules.org/

[Athul F]

Can you share your directive/code used to show automated breadcrumb?

[Bernd Wessels]

Hi

Using ui-router makes it so simple that you don't need an extra directive. Just combine the html from the first post with Peters suggestion in the second post and you got your automated breadcrumbs.

Cheers

Bernd

[Christopher Marshall]

For some reason my $state.$current.path is an empty array. Even on a state/url with domain/segment1/segment2

[Bernd Wessels]

Mmh

That is not much information. Best to setup a fiddler with an example.

Cheers

Bernd

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.

To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/oyReJon6iQ0/unsubscribe.

To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.