在配置阶段进行翻译(使用angular-translate) [英] Translating during config phase (using angular-translate)

问题描述

我正在开发Angular Web应用程序的i18n部分，我想在配置阶段使用angular-translate.

I'm developing the i18n part of my Angular web app, and I'd like to use angular-translate in my config phase.

我定义了一些我想翻译的数据:

I defined some data that I'd like to translate:

.state('app.tracking', {
    url: '/:IdentityIdentifier',
    params:{
        IdentityIdentifier: {squash: false, value: null}
    },
    templateUrl: 'views/pages/tracking.html',
    data : { title: $filter('translate')('tracking.tracking.TITLE') },
    resolve: load([], function(){ return loadGoogleMaps(); })
})

这是我的配置声明:

.config(
  [          '$stateProvider', '$urlRouterProvider', '$locationProvider', 'MODULE_CONFIG', '$httpProvider', '$filter',
    function ($stateProvider,   $urlRouterProvider,   $locationProvider,   MODULE_CONFIG,   $httpProvider,   $filter) {

我得到的错误是经典错误:错误:[$ injector:unpr]未知提供程序:$ filter

The error I get is classic: Error: [$injector:unpr] Unknown provider: $filter

我知道我不能在配置阶段使用服务，只能使用提供程序，但是我的问题有解决方案吗?

I'm aware I can't use services in config phase, only providers, but is there a solution to my problem?

编辑:通过将键'tracking.tracking.TITLE'分配给我的 data.title 变量，解决了我的问题，然后在我的标记中使用 translate 指令进行翻译.

My problem has been solved by assigning the key 'tracking.tracking.TITLE' to my data.title variable, then translating it using translate directive in my markup.

推荐答案

是的，就像EDIT中提到的那样:在标记中应用过滤器显然是最简单的解决方案.

Yes, like mentioned in the EDIT to the question: applying the filter in the markup is obviously the easiest solution.

此外，如果您真的想在配置阶段访问服务，请继续阅读:

Besides that, if one would really want to access services in config phase, then read on:

在角度< = 1.4中，这在技术上是不可能的.

It is technically not possible in Angular <= 1.4.

从Angular v1.5(当前rc版本为1.5.0-rc.0)开始，似乎有可能，尽管我不建议这样做，因为配置阶段应该是在首次使用服务之前对其进行配置的位置.

Starting from Angular v1.5 (current rc version is 1.5.0-rc.0) it seems to be possible, although I cannot recommend to do so, because the config phase should just be the place where the services are configured before they're used for the first time.

此更改使以下操作成为可能(链接到github上的angular.js存储库)(仅允许装饰 $ injector ).

现在，这是示例: http://codepen.io/NicBright/pen/PZJBPP?editors=101

JS部分:

(function() {
  var result;

angular.module('myApp', [])
  .config(function($injectorProvider) {
    result = $injectorProvider.$get().get('myService').getSomething();
  })
  .factory('myService', function() {
    return { getSomething: function() { return 'it works!'; }}
  })
  .controller("MainCtrl", function($scope) {
    $scope.result = result;
  })

})();

HTML部分:

<div ng-app="myApp" ng-controller="MainCtrl">
  result: {{ result }}
</div>

这篇关于在配置阶段进行翻译(使用angular-translate)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！