Chandra Shekhar Chandra Shekhar - 6 months ago 50
AngularJS Question

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 this
apply online...

so i have done like this

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

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

Also what is the use of


Limiting string with limitTo filter

{{ limitTo_expression | limitTo : limit : begin}}

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

Which will output:

My String

Or use following approach (not using the translate directive.


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.

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


     translate-values="{ username: someScopeObject.username }"></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...


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

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