CODEWITHSUNDEEP
angularjsangular-translateangular-bootstrap
Alexandru R
Alexandru R

Reputation: 8833

Translating angular bootstrap directives using angular-translate without filters?

How do you best translate angular bootstrap directives like uib-tab and uib-tooltip without the use of filters?

Filters add a lot of watchers, so I don't want to make it like:

<uib-tab heading="{{'A. Manually add emails'|translate}}" is-open="true">

Is there anothe way to do it?

Upvotes: 1

Views: 1388

Answers (3)

innovarerz
innovarerz

Reputation: 146

You can also use $translate service with instant method inside your controller in order to get immediate explicit translation without any $filter, like this: $translate.instant(your-key), returns string/object depends on your input, see: $translate

.controller('MyCtrl', function($scope, $translate){
   ...
   $scope.translatedTooltip = $translate.instant('tooltip-key');
   ...
});

<uib-tab heading="{{translatedTooltip}}" is-open="true">

Upvotes: 0

boyomarinov
boyomarinov

Reputation: 615

Although all previous comments are correct, here's an alternative, if you really want to avoid the filter:

function TranslateAttr($translate) {
  return {
    restrict: 'A',
    link: {
      pre: function (scope, elem, attrs) {
        var attribute = attrs.translateAttr,
            attributeValue = attrs[attribute];

        if (attributeValue) {
          $translate(attributeValue).then(function (translation) {
            attrs.$set(attribute, translation[attributeValue]);
          });
        }
      }
    }
  };
}

Now to use it in your example:

<uib-tab heading="{{'A. Manually add emails'}}" is-open="true" translate-attr="heading">

Upvotes: 0

Petr Averyanov
Petr Averyanov

Reputation: 9476

You can use one time binding where you are sure that value wont change:

{{::name | translate}}

http://plnkr.co/edit/NS6XFZGgflWsR9Zk9d5L?p=preview

But if you use filter for constant string - no watcher will be created.

Upvotes: -1

Related Questions