Scott Walter Scott Walter - 11 months ago 76
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 Source

as written in the documentation (, 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