如何使用带有 limitTo 过滤器的 angular 翻译指令

Question

我在我的应用程序中使用 angular 翻译指令。现在我正在翻译一个 returns 字符串的键。

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

假设我得到的字符串形式的翻译为 apply online for this course。

现在我希望这个字符串限制为只有 12 个字符，就像这样apply online...。

所以我这样做了

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

但这不正确所以当表达式来自翻译本身时，我如何使用 limitTo 过滤器。

还有translate-values和translate-compile有什么用。

Answer 1

使用 limitTo 过滤器限制字符串

{{ limitTo_expression | limitTo : limit : begin}}

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

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

这将输出：

My String

或使用以下方法（不使用 translate 指令。

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

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

关于 angular-translate 指令的另一个问题。

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>

或

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

或

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

Post 编译中

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.

可以根据指令启用此行为：

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

除此之外，您还可以全局启用该功能...

$translateProvider.usePostCompiling(true);

...即使这样您也可以根据指令再次禁用该功能：

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

如何使用带有 limitTo 过滤器的 angular 翻译指令

How to use angular translate directive with limitTo filter

angularjs

angular-translate