1

I'm using angular-gettext, angular-breadcrumb and angular-ui-router.

I have my app configuration similar to this:

app.config(function($stateProvider) {

  $stateProvider.state('welcome', {
     url : '/',
     templateUrl: 'index.html',
     ncyBreadcrumb : {
        label : 'Home'
     }
  });

});

I would like to be able to translate the label for the breadcrumb ('Home') by angular-gettext. In order to this I need to include gettext tools into the app.config() function. Something like this would be ideal, however gettextCatalog isn't available during the config phase:

app.config(function($stateProvider, gettextCatalog) {

  $stateProvider.state('welcome', {
     url : '/',
     templateUrl: 'index.html',
     ncyBreadcrumb : {
        label : gettextCatalog.getString('Home')
     }
  });

});

Is there any other way to achieve this with these plugins, especially with the angular-gettext?

Sevle
  • 3,109
  • 2
  • 19
  • 31
Knut Holm
  • 3,988
  • 4
  • 32
  • 54

1 Answers1

3

According to the angular-breadcrumb docs:

The property ncyBreadcrumbLabel can contains bindings which are evaluated against the scope of the current state controller.

I haven't tested this, but I would think you could use the gettextCatalog module in your controller:

$stateProvider.state('home', {
  url: '/',
  templateUrl: 'index.html',
  controller: function($scope, gettextCatalog) {
    $scope.label = gettextCatalog.getString('Home');
  },
  ncyBreadcrumb: {
    label: '{{label}}'
  }
})
Corey
  • 5,818
  • 2
  • 24
  • 37
  • 1
    This is probably the best solution. Another possibility is [this one](https://github.com/ncuillery/angular-breadcrumb/issues/65). Even `label: '{{label|translate}}'` works too, however none of these two expressions is detected by `grunt-angular-gettext` extraction so they are useless. – Knut Holm Apr 22 '15 at 08:35