Angularjs translate placeholder
I am using angular translator to translate my html buttons and labels, the problem is when I used inside placeholder I get unnecessary characters for french. But the same works well in the span tag. which would be a problem with a placeholder.
<input data-ng-model="vm.search" class="form-control" type="search"
ng-attr-placeholder="{{'resources.contacts-organisations-searchplaceholder' | translate }}...">
the same stuff works with a range
<span translate="resources.contacts-organisations-searchplaceholder"></span>
+3
source to share
2 answers
Sorry a little late: But I created a directive for this which will solve your problem.
app.directive('ngBindPlaceholder', ['$sce', '$parse', '$compile', function($sce, $parse, $compile){
return {
restrict: 'A',
compile: function ngBindHtmlCompile(tElement, tAttrs) {
var ngBindHtmlGetter = $parse(tAttrs.ngBindPlaceholder);
var ngBindPlaceholderWatch = $parse(tAttrs.ngBindPlaceholder, function getStringValue(value) {
return (value || '').toString();
});
$compile.$$addBindingClass(tElement);
return function ngBindHtmlLink(scope, element, attr) {
$compile.$$addBindingInfo(element, attr.ngBindPlaceholder);
scope.$watch(ngBindPlaceholderWatch, function ngBindWatchAction() {
// we re-evaluate the expr because we want a TrustedValueHolderType
// for $sce, not a string
element.html($sce.getTrustedHtml(ngBindHtmlGetter(scope)) || '');
var plc = element.text();
element.attr('placeholder',plc);
});
};
}
};
}]);
Used in HTML:
<input type="text" id = "name" data-ng-bind-placeholder="'Label.name' | translate>
+3
source to share