CODEWITHSUNDEEP
angularjsangular-translate
chandradot99
chandradot99

Reputation: 3866

How to use angular translate directive with limitTo filter

I am using angular translate directive in my application. Now i am translating a key which returns a string.

<div translate="TRANSLATION_KEY"></div>

suppose I got the translation in string form as apply online for this course.

Now i want this string to limit to only 12 characters like thisapply online....

so i have done like this

<div {{translate="TRANSLATION_KEY | limitTo:12 }}"></div>

but this is not correct so how can i use limitTo filter when expression is coming from translation itself.

Also what is the use of translate-values and translate-compile.

Upvotes: 1

Views: 554

Answers (1)

daan.desmedt
daan.desmedt

Reputation: 3820

Limiting string with limitTo filter

{{ limitTo_expression | limitTo : limit : begin}}

https://docs.angularjs.org/api/ng/filter/limitTo

{{ "My String Is Too Long" | limitTo: 9 }}

Which will output: 

My String

Or use following approach (not using the translate directive.

<span>{{TRANSLATION_KEY|translate|limitTo:9}}</span>

https://angular-translate.github.io/docs/#/guide/04_using-translate-filter

About the other question regarding the angular-translate directive.

The translate directive expects an optional translate-values attribute you can use to pass some values through it. All you have to do is to combine the directive with the translate-values attribute.

You can pass either an object literal as string, expression, or, if the value is dynamic, an interpolation directive. Whatever you pass in, it gets internally evaluated and parsed by translate filter, so what comes out is a plain old JavaScript object which gets passed to $translate service.

<ANY translate="TRANSLATION_ID"
     translate-values='{ username: "PascalPrect"}'></ANY>

or

<ANY translate="TRANSLATION_ID"
     translate-values="{ username: someScopeObject.username }"></ANY>

or

<ANY translate="TRANSLATION_ID"
     translate-values="{{translationData}}"></ANY>

Post compiling

Starting with version 2, the translation itself can be post processed in context of the current scope (using $compile). This means any directive used in a translation value itself will now work as expected.

This behavior can be enabled per directive:

<ANY translate="TRANSLATION_ID" translate-compile></ANY>

In addition to it, you can also enable the feature globally with...

$translateProvider.usePostCompiling(true);

... and even then you can disable the feature again per directive:

<ANY translate="TRANSLATION_ID" translate-compile="false"></ANY>

Upvotes: 2

Related Questions