通过自定义指令使用角度转换

Question

Currently I am creating my own directive using the angular translate. As a tooltip for the image I am using some translation. When I am switching the language, the translation text stays the same, when it should change. I think, that the directive got compiled once with the current translation value, but I don't know how to get it updated any time I switch my language (some kind recompile).

Below my directive code.

 'use strict'; angular.module('HomeModule') .directive("headerName", ["tabService", "imageService", "$translate", "$filter", function(tabService, imageService, $translate, $filter){ var directive = {}; directive.restrict = 'E'; directive.template = '<div class="vcenter"><img ng-src="' + imageService.getImageByKey('arrowLeftSrc') + '" height="20px" tooltip-class="custom-tooltip" tooltip="' + $filter('translate')('RETURN') + '" tooltip-placement="bottom" tooltip-popup-delay="500" class="return-arrow"/></div>' + '<div class="vcenter"><i class="fa fa-angle-down fa-2x"/></div>'; directive.scope = {} return directive; }]); 

Answer 1

In short the solution is: translate-attr-tooltip="RETURN" .

Don't use a $filter in your directive template, but the angular-translate directive translate-attr-* ( https://angular-translate.github.io/docs/#/api/pascalprecht.translate.directive:translate ).

Here is a JSFiddle to play around - http://jsfiddle.net/ku326j6p/2/