Search code examples
angularjszurb-foundationangular-translateangular-foundation

angular-foundation and angular-translate: apply translation into attribute back-text

I'm using angular-translation and angular-foundation modules with AngularJS and have defined Foundation top-bar like this:

<top-bar custom-back-text="true" back-text="My back text">

[...]

</top-bar>

I need to apply translate filter to My back text. Already tried these two solutions but with no success:

example 1 - CODE

<top-bar custom-back-text="true" back-text="'BACK.KEY' | translate">

example 1 - TEXT IN MENU

BACK.KEY

example 2 - CODE

<top-bar custom-back-text="true" back-text="{{ 'BACK.KEY' | translate }}">

example 2 - TEXT IN MENU 

'BACK.KEY' | translate

Do I something wrong or is there no possibility to achieve this with these two modules?

Used versions

angular-translate: 2.4.2
angular-foundation: 0.5.1
Solution

  • If you check the js source code of foundation you will find this piece of code that handles back button

    if (settings.custom_back_text == true) {
    $('h5>a', $titleLi).html(settings.back_text);
} else {
    $('h5>a', $titleLi).html('&laquo; ' + $link.html());
}
$dropdown.prepend($titleLi);

    So it creates new element and adds to dropdown, result of which is that it copies the value you specified in the back_text. By that time "translate" is not resolved so it copies whatever you put there.

    A quick hack to do to solve it you could listen for language change by doing

    $rootScope.$on("$translateChangeSuccess", function...

    As you can see in the piece of code from foundation.js it creates "a" element inside "h5", so you can do something like this

    $rootScope.$on("$translateChangeSuccess", function(){
  angular.element(".dropdown h5>a").html($filter('translate')('BACK'))
})

    where "BACK" is the key used for translation.

    But keep in mind that it's not a good practice to manipulate DOM inside controller, so you may create directive for that.

    Though there may be better way to achieve it, this could be just quick hack to do the thing.