selectize.js 的占位符翻译

Question

我正在尝试为 selectize.js 中的占位符添加翻译。

但是，它在翻译方面似乎有不同的行为。

例如

<selectize config='selectizeConfig' placeholder='keyword' ng-click="clear()"
options="myOptions" ng-model="selected"></selectize>

当我尝试这样做时，

placeholder="{{'keyword'| translate }}"

没用！虽然它适用于 uib-tooltip 和其他类似的东西。

<input type="text" placeholder="{{'keyword'| translate}}"/>

有什么想法吗？

Answer 1

因此，当您使用 angular-selectize 时，您可以选择在配置对象中设置占位符。更喜欢它而不是 DOM 上的占位符属性。所以你的配置对象可能看起来像：

$scope.myConfig = {
    create: true,
    onChange: function(value){
      console.log('onChange', value)
    },
    placeholder : $scope.placeholder
}

其中$scope.placeholder在controller中定义如下：

$scope.placeholder = $filter('translate')('PLACEHOLDER');

这里'PLACEHOLDER'是一个翻译id。所以这样你就可以根据使用 ngTranslate 的翻译选择占位符。

这取决于您的应用中是否实施了翻译，例如如果您的应用程序在更改语言时没有重新加载，那么您将不得不处理更多事情，例如，在更改语言时，您需要再次定义该选择的配置对象，并且您需要删除该元素并重新创建它在 DOM 中使用 ng-if 所以该 selectize 元素上会有一点闪烁，但它会执行得很好。如果您的应用程序要在语言更改时重新加载，则不需要此逻辑实现。

Working Plunker Example

selectize.js 的占位符翻译

Placeholder translation for the selectize.js

javascript

html

angularjs

selectize.js