Scott Walter Scott Walter - 28 days ago 5
AngularJS Question

Angular Translate Parameters with Controller As Syntax

I am using an Angular 1.5 component and trying to do an Angular Translate with parameters. Here is my markup:

Value is {{$ctrl.minFormatted}}
<div ng-message="dateRange" class="error-message">{{'invalidRange' | translate:'{ start: $ctrl.minFormatted, end: $ctrl.maxFormatted}'}}</div>


The message translates except it doesn't fill in the parameters. I verified $ctrl.minFormatted does have a value by displaying right above the translation.

In the past when I used a standard angular controller I used $scope.minFormatted. However this doesn't work since I'm using the controller as syntax

Answer

as written in the documentation (https://angular-translate.github.io/docs/#/guide/06_variable-replacement), their best practice for using variables in the transalate filter would be passing a variables value to the filter from the scope. for example:

<div ng-message="dateRange" class="error-message">{{'invalidRange' | translate:$ctrl.translationValues}}</div>

define the value in the controller:

$scope.trasnlationValues = { "start": $ctrl.minFormatted, "end": $ctrl.maxFormatted};

a better way (and way more readable) of achieving the same would be using the translate-directive. for example:

<div ng-message="dateRange" class="error-message" **translate**="invalidRange" **translate**-values='{ start: $ctrl.minFormatted, end: $ctrl.maxFormatted}'></div>

would recommend you to explore their documentation for more details