Using angular-translate on state parameters

Question

I'm using angular-translate for localization and everything works fine except for translating data inside state parameters.

For example, I have a state like this:

.state('about', {
      url: "/about",
      isAbstract: true,
      template: '<ui-view/>',
      data: {
        title: 'About'
      }
    })

The title should be the translation key. I tried title: $filter('translate')('ABOUT') but it didn't work.

Any ideas on how I could do it?

Answer 1

You should use given syntax as below

.run(function($rootScope, $translate) {
    $rootScope.$on('$stateChangeStart', function(event, toState) {
        if (toState.data.title) {
            $translate(toState.data.title).then(function(translation) {
                $rootScope.pageTitle = translation;
            },
            function() {
                $rootScope.pageTitle = 'About';
            });
        }
    });
})

Take look at example at here