Breadcrumb label translations support

[jamhall]

Hi!

First of all, great module!

It would be nice if this module supported translations for the breadcrumbs labels.

It could be passed in as an extra option to enable it:

myAppModule.config(function($breadcrumbProvider) {
    $breadcrumbProvider.setOptions({
      translations: true
    });
  })

What are your thoughts?

I would happily implement it if you'd like... Of course I'd make sure that the dependency for the angular-translate module is optional.

[ncuillery]

I suppose you have in mind to translate the labels containing translate keys programmatically if the options is set to true, right ?

How about using a custom template like this ?

<ol class="breadcrumb">
  <li ng-repeat="step in steps" ng-class="{active: $last}" ng-switch="$last || !!step.abstract">
    <a ng-switch-when="false" href="{{step.ncyBreadcrumbLink}}">{{step.ncyBreadcrumbLabel | translate}}</a>
    <span ng-switch-when="true">{{step.ncyBreadcrumbLabel | translate}}</span>
  </li>
</ol>

[andresalves]

ncuillery. Very good

[egel]

I like this version of breadcrumbs template with support of translations (written in Jade):

ol.breadcrumb
  li(ng-repeat="step in steps | limitTo:(steps.length-1)")
    a(href="{{step.ncyBreadcrumbLink}}" ng-bind-html="step.ncyBreadcrumbLabel | translate")
  li.active(ng-repeat="step in steps | limitTo:-1")
    span(ng-bind-html="step.ncyBreadcrumbLabel | translate")

[ncuillery]

@jamhall I'm not very kind of this option. I prefer keep the API simple and let users making a custom template.

I think I'll make a FAQ wiki page. I keep the issue open to remember to add an entry for angular-translate integration.

[jamhall]

I'm happy with the solution offered above :-).

Thanks

[ncuillery]

I keep the issue open to remember to add an entry for angular-translate integration.

So don't close it please ;-)

[goliney]

@ncuillery I tried custom template like you suggested, but it only works after I move to another state. On initial load my breadcrumbs are not translated. Any suggestions how to fix it?

[GitYouss]

Hi there,

I was in the very same case as you did @goliney, I found this on Stack Overflow and it worked like a charm:

http://stackoverflow.com/questions/30292000/gettext-module-in-angularjs-does-does-not-translate-gettextcatalog-getstring-i

Basically (quoted from Stack Overflow):

Anything that goes on the scope shouldn't use gettextCatalog.getString.

Use something like this:

$rootScope.stepText = gettext("My step 1 title");
And in the view:

{{stepText | translate}}

[arielcr]

Hi there,

Nice solution! I was wondering what about variable replacement in translate filter. I've already tried passing some random text, and it works pretty fine, but I need is to specify a variable, not some static text, for example:

<a ng-switch-when="false" href="{{step.ncyBreadcrumbLink}}">{{step.ncyBreadcrumbLabel | translate:"{entity:variable}"}}</a>

I tried accessing a scope variable, but then I realized that I cannot access the rootScope or scope data inside .config. Maybe some provider that I can access in .config?

Has anybody run through this also?