i10n angularjs 分配翻译变量

Question

好的，我有以下小翻译文件：

    {
    "components" : {
    "1" : "Video",
    "2" : "Lyd",
    "3" : "Dokument",
    "4" : "Tekst"
}

}

然后我有以下 li 项：

<li ng-repeat="type in componentTypes" ng-hide="module.module_type_id == 2 || module.module_type_id == 10"><a href="" ng-click="addComponent(type)" translate="components.{{1}}">{{type.name}}</a></li>

您需要注意的是：

<a href="" ng-click="addComponent(type)" translate="components.{{1}}">{{type.name}}</a>

或者更准确地说：

translate="components.{{1}}"

它不会翻译 <a></a> 标签。

但是如果我这样做

translate="components.1"

它翻译正确但是这个方法对我不起作用

所以我的问题是如何动态更改翻译属性的值？

Answer 1

components.{{1}} 不起作用的原因是 Angular 中的双卷曲只是为了计算表达式。 1 只是一个数字，所以你每次都会得到 components.1。

如果我理解你需要的是正确的，你需要有一个基于类型的对应组件。所以如果 type.id === 1 那么你的类型是 Video.

为了在 Angular 中动态实现，您应该：

translate="{{components[type.id]}}"

Fiddle

Answer 2

请试一试：

translate="{{'components.' + type.id}}" //if there is id in type

或

translate="{{'components.' + ($index + 1)}}"

Answer 3

据我了解，如果向 componentTypes 数组添加新类型，您希望动态化翻译 json。

有满足该需求的解决方案，您可以实现一个新的自定义翻译加载器工厂并在此处以指定方式使用它 https://github.com/angular-translate/angular-translate/wiki/Asynchronous-loading。之后你必须将这个新项目添加到翻译json，你的数组然后刷新翻译。

查看：

<div ng-app="myApp">
    Links to jsfiddle.net must be accompanied by code. Please indent all code by 4 <div ng-controller="MyCtrl">
        <input type="text" ng-model="type.name" /> <a href="javascript:;" ng-click="addComponent(type)">Add Component</a>

        <ul>
            <li ng-repeat="type in componentTypes" ng-hide="module.module_type_id == 2 || module.module_type_id == 10">{{ 'components.' + type.name | translate }}</li>
        </ul>
    </div>
</div>

您的应用程序的实施：

var myApp = angular.module('myApp', ['pascalprecht.translate']);

var components_en = {
    "components": {
        "1": "Video",
            "2": "Lyd",
            "3": "Dokument",
            "4": "Tekst"
    }
};

myApp.config(function ($translateProvider) {
    $translateProvider.useLoader('customLoader', {});
    $translateProvider.translations('en', components_en);
    $translateProvider.preferredLanguage('en');
});

myApp.controller('MyCtrl', function ($scope, $translate) {
    $scope.module = {
        module_type_id: 1
    };

    $scope.addComponent = function (type) {
        // Add the componentTypes array you took from database
        $scope.componentTypes.push({
            name: $scope.componentTypes.length + 1
        });

        // Add the translation object
        components_en["components"][$scope.componentTypes.length] = type.name;
        console.log(components_en);
        $translate.refresh();
    };

    $scope.componentTypes = [{
        name: 1
    }, {
        name: 2
    }, {
        name: 3
    }, {
        name: 4
    }];
});

myApp.factory('customLoader', function ($http, $q) {
    return function (options) {
        var deferred = $q.defer();

        deferred.resolve(components_en);

        return deferred.promise;
    }
})

我准备了一个类似用法的演示，请在jsfiddle下面：

http://jsfiddle.net/nerezo/1z071wzg/6/

注意：这样的翻译修改不会持久化，新的翻译会丢失。

i10n angularjs 分配翻译变量

i10n angularjs assign translate variable

javascript

translation

angularjs