角度翻译

时间:2015-02-18 09:51:53

标签: javascript angularjs angular-translate

在我的应用程序中我想添加将页面翻译成用户在浏览器中设置的所有语言的功能,如果没有可用的语言翻译成默认的英语...问题是浏览器与语言支持不一致。我找到了一个解决方法,我对一些返回用户语言的webservice进行http调用。它在app.run

中完成
app.run(function($rootScope, UserDataService, $translate){

UserDataService.getUserBrowserLanguage().then(function(language){



    var langArr = language.split(',').map(function(el){
            return el.split(';')[0].split(/-|_/)[0];
        });


    $translate.fallbackLanguage(langArr)
    $translate.preferredLanguage(langArr[0]);
    $translate.use(langArr[0]);
});

});

并在app config中:

app.config(function ($routeProvider, $translateProvider) {

    $translateProvider.useStaticFilesLoader({
        prefix: '/languages/',
        suffix: '.json'
    });

});

部分因为我无法在配置中进行http调用而且它失败了...:/ langauges已加载但翻译没有更改...我做错了什么?这是plunker:

http://plnkr.co/edit/41SngK2tCTeaq8IhMbcM

它没有显示任何翻译......为什么? :(我会很高兴任何帮助。

1 个答案:

答案 0 :(得分:1)

至于你的问题,由于以下错误,视图没有显示任何内容:

几个错误: 首先,应该将ng-app移动到html标签。

<html ng-app="translateApp">

其次,如果您使用控制器中的变量,则应使用ng-controller。

<div ng-controller="mainCtrl">

最后,当您将视图中的变量绑定到控制器时,该变量应位于$ scope。

  $scope.translation = $translate.instant('GENERAL');

使用我的评论修正了你的傻瓜:Plunker

至于$ translate的工作方式,我对这项服务并不熟悉,但我会试着看看。

修改 我研究了$ translate服务,以便给你一个完整的答案,包括修复你使用Translate的方式,所以首先我在尝试使用translate.instant之前暂停了2秒,原因是我让翻译加载了配置中的JSON文件。

我添加了2个按钮,因此您可以在语言之间切换,看它是否正常工作。

享受!这是更新后的工作Plunker。 这是我使用的翻译documentation网站。