标签: angular-translate

我在AngularJS应用程序中使用angular-translate for i18n.

对于每个应用程序视图,都有一个专用控制器.在下面的控制器中,我将值设置为页面标题.

码

HTML

<h1>{{ pageTitle }}</h1>

JavaScript的

.controller('FirstPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
        $scope.pageTitle = $filter('translate')('HELLO_WORLD');
    }])

.controller('SecondPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
        $scope.pageTitle = 'Second page title';
    }])

我正在使用angular-translate-loader-url扩展名加载翻译文件.

问题

在初始页面加载时,将显示翻译键,而不是该键的翻译.翻译是Hello, World!,但我看到了HELLO_WORLD.

我第二次去页面,一切都很好,并显示翻译版本.

我假设问题与控制器分配值时可能尚未加载转换文件的事实有关$scope.pageTitle.

备注

使用<h1>{{ pageTitle | translate }}</h1>和时$scope.pageTitle = 'HELLO_WORLD';,翻译工作从第一次起完美.这个问题是我并不总是想要使用翻译(例如,对于第二个控制器,我只想传递一个原始字符串).

题

这是一个已知的问题/限制吗？怎么解决这个问题？

有没有办法在控制器中获取当前使用的语言(没有$translateProvider)？

在$translate服务中找不到任何东西.

我正在尝试实现一个语言切换器,如果用户点击"en"侧的任何给定页面上的"de" - 它会将它们带到"de"侧的那个页面.如果我在console.dir中使用$ state参数,它会使用给定$ state的"current"属性公开我想要的值.如果我尝试使用console.dir $ state.current来关注我想要的值,它只给出父状态属性(我当前的视图是嵌套的).

我当前的想法是,我在url/en/content,然后动态地我可以让我的lang导航动态地将适当的目标点加载到某种数据属性中,用我自己启动的自定义指令选择那些"转到"并根据angular-translate设置我的首选语言值.

目前的关键问题是暴露那个$ state name - 再次,当简单地浏览$ state时,当前对象给出了我想要的值,但$ current.state直接只给出了父状态.

如果有人有更好的建议如何做到这一点(以一种有角度的方式 - 没有自定义cookie垃圾)我很乐意接受建议.

谢谢!

更新!代码示例:

我的州的对象参考:

var urlStates = {
        en: {
            home: {
                name: 'home',
                url: '/en',
                templateUrl: 'templates/'+lang+'/home.html',
                abstract: 'true'
            },
            home_highlights: {
                name:'home.highlights',
                url: '',
                templateUrl: 'templates/'+lang+'/home.highlights.html'
            },
            home_social:
            {
                name: 'home.social',
                url: '/social',
                templateUrl: 'templates/'+lang+'/home.social.html'
            },
            home_map:
            {
                name: 'home.map',
                url: '/map',
                templateUrl: 'templates/'+lang+'/home.map.html'
            }

        };

我的国家:

$stateProvider
        .state(urlStates.en.home)
        .state(urlStates.en.home_highlights)
        .state(urlStates.en.home_social)
        .state(urlStates.en.home_map);

        $locationProvider.html5Mode(true);

})

控制器:

.controller('LandingPage', function($translate, $state){
    this.state = $state; …

如何应用ng-translate翻译选择框内的选项.
例如:

模板:

<select class="form-control" ng-model="me.gender" ng-options="gender.name for gender in genders">
</select>

控制器:

$scope.genders = [{code: "M", name:"TXT_MALE"}, {code: "F", name:"TXT_FEMALE"}]

enUS.json:

{
    "TXT_MALE": "Male",
    "TXT_FEMALE": "Female",
}

我尝试添加过滤器,ng-options="gender.name for gender in genders | translate" 但显然它是添加过滤器到$scope.genders数组而不是单个元素

我尝试编写自己的过滤器(我是新手)

filter('translateArrayObj', ['$translate', '_', function($translate, _) {
  return function(arr) {
    var arr2 = [];
    angular.forEach(arr, function (value, key) {
      $translate(value.name).then(function(translation) {
        var obj2 = angular.copy(value);
        obj2.name = translation;
        obj2.code = value.code;
        arr2.push(obj2);
      });
    });
    return arr2;
  }
}])

但我得到了以下错误

Error: [$rootScope:infdig] …

我正在使用ui-router进行路由和角度转换以进行翻译.我想要实现的是将所选语言绑定到url,如下所示:

www.mydomain.com/en/
www.mydomain.com/ru/
www.mydomain.com/en/about
www.mydomain.com/ru/about

它将作出相应的回应.

试图寻找例子,但没有找到任何东西.如果有人实施了类似的解决方案,我很想听听你是怎么做到的.

谢谢

我在一个相当大的Angular项目上使用angular-translate.我正在将项目分成多个模块以使其更易于管理,但我无法分解每个模块的翻译字符串.

例如,我有模块A和B,其中B是A的子模块.有一些字符串与模块A所涵盖的HTML有关,它们放在'/json/localization/A/en.json'中.同样,我在'/json/localization/B/en.json'中有与B相关的字符串.首先,我使用angular-translate的$ translationProvider在模块B中加载B的en.json.然后我加载模块A的en.json,也使用$ translationProvider.问题是加载A的字符串会覆盖B的字符串而它们会丢失.

使用angular-translate,是否有一种方法可以在不重写的情况下为每个模块加载字符串,或者父模块是否必须从单个en.json加载所有字符串？

以下是我如何加载翻译字符串的示例(在coffeescript中):

my_module.config(['$translateProvider', ($translateProvider) ->
  $translateProvider.useStaticFilesLoader
    prefix: '/json/localization/A/'
    suffix: '.json'

  $translateProvider.preferredLanguage 'en'
])

我的应用程序使用angular-translate,angular-ui-router和模板.除index.html之外的应用程序html页面被打包到模板中,并由S3支持的Amazon CloudFront提供.我想要做的是找到一种方法来根据域名后面的两个字母代码动态切换语言,如果可能的话,还可以选择用户区域设置并将其用于默认切换.

我想这样做的原因是出于搜索引擎优化的目的,因为我读过谷歌建议将国家代码放入地址,如下所示.

这是我到目前为止所拥有的:

路由器文件

    var home = {
        name: 'home',
        url: '/home/'
    };

    var homeAccess = {
        name: 'home.access',
        url: 'access',
        views: {
            'home@': {
                templateProvider: ['$templateCache', ($templateCache) => {
                    return $templateCache.get('webapi.html');
                }],
            }
        }
    };

不知何故,我想这样做,以便在搜索引擎选择时:

www.example.com/de/home/webapi  or
www.example.com/en/home/webapi  or
www.example.com/fr/home/webapi

在提供webapi.html文件之前,该角度路由器会切换到相应的语言文件.

关于如何做到这一点的任何建议将不胜感激.理想情况下,我想看一个简单的语言文件切换器示例,它可以帮助我和社区中的其他人做所需的事情.

请注意还有另一个类似的问题:

使用ui-router和angular-translate本地化URL

那里的答案很好,但我也希望通过开放这个问题,我可以得到一个更好,更新的答案,或许有一些国际化的SEO技巧投入.我只是认为这是一个如此重要的事情,更多的答案帮助这个论坛上的人们更好.

在我的指令模板中,我需要使用角度平移过滤器:

    <label for="data-source-btn">
      <span id="data-source-btn-span"></span>
      {{'Data Source' | translate}}
    </label>

然后在我对该指令的单元测试中,我收到错误:

未知提供者:translateFilterProvider < - translateFilter

我试过注射$filter并获得$translate由$translate = $filter('translate');不解决问题-这是真的用于测试过滤器

我可以注入模块pascalprecht.translate,但这很重要.我如何最好地模拟过滤器？

我有这样的文件,有翻译键和值:

locale-en.json
{
    "CHANGE_PASSWORD": "Change Password",
    "CONFIRM_PASSWORD":  "Confirm Password",
    "NEW_PASSWORD": "New Password"
}

locale-jp.json
{
    "CHANGE_PASSWORD": "???????????",
    "CONFIRM_PASSWORD":  "???????????",
    "NEW_PASSWORD": "????????"
}

例如,当我向包含英语翻译的JSON文件添加新的翻译密钥时,我必须记住将该密钥和相关的翻译添加到所有其他JSON文件中.所有JSON文件也都单独编辑.这个过程很费力且容易出错.

有没有人找到减少错误和自动化过程的方法.

理想情况下,我希望能够从Windows PowerShell运行一个脚本,如果向locale-en.json添加了一个额外的密钥,该脚本会将文件更改为:

locale-en.json
{
    "CHANGE_PASSWORD": "Change Password",
    "CONFIRM_PASSWORD":  "Confirm Password",
    "NEW_PASSWORD": "New Password",
    "NEW_KEY": "New Key"
}

locale-jp.json
{
    "CHANGE_PASSWORD": "???????????",
    "CONFIRM_PASSWORD":  "???????????",
    "NEW_PASSWORD": "????????",
    >>>"NEW_KEY": "New Key"
}

在Angular 1.3.x上使用最新版本的angular-translate.使用$sanitize它似乎直接使用过滤器或服务时会出现问题,但在使用该指令时它会起作用.

建议？

这是一个例子:

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

myApp.config(function($translateProvider) {
    $translateProvider.useSanitizeValueStrategy("sanitize");
    $translateProvider.preferredLanguage('en');
    $translateProvider.translations('en', {
        UTF: 'öéü',
    });
});

myApp.controller("myCtrl", function($scope, $translate) {
    $translate("UTF").then(function(trans) {
        $scope.UTFCTRL = trans;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-sanitize.min.js"></script>
<script src="http://rawgit.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <div>
        Wrong: <h1>{{ 'UTF' | translate }}</h1>
    </div>
    
    <div>
        Ok: <h1 translate="UTF"></h1>
    </div>
    
    <div>
        Wrong: <h1>{{ UTFCTRL }}</h1>
    </div>
</div>

在jsfiddle:http://jsfiddle.net/gnvpo6aa/