Angular UI 网格 - 即时翻译网格

Question

我正在使用 angular ui-网格。我想即时翻译网格。例如，我当前的语言是英语。网格以英语呈现。现在我切换到法语。我希望我所有的菜单选项都被翻译成法语。我怎样才能做到这一点？这是我的link plunkr。

http://plnkr.co/edit/tpdNYirUEIF3RL0kf2d7?p=preview

这是我的示例代码

HTML

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <script src="https://rawgithub.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

    <div ng-controller="MainCtrl">
      <select ng-model="lang" ng-options="l for l in langs"></select><br>

      <div ui-i18n="{{lang}}">
         <p>Using attribute:</p>
         <p ui-t="groupPanel.description"></p>
         <br/>
         <p>Using Filter:</p>
         <p>{{"groupPanel.description" | t}}</p>

         <p>Click the header menu to see language. NOTE: TODO: header text does not change after grid is rendered. </p>

         <div ui-grid="gridOptions" class="grid"></div>
      </div>

    </div>
  </body>
</html>

我的 JS

var app = angular.module('app', ['ngTouch', 'ui.grid', 'pascalprecht.translate']);

app.controller('MainCtrl', ['$scope', 'i18nService', '$http', '$translate','$rootScope', function ($scope, i18nService, $http, $translate,$rootScope) {
    $scope.langs = i18nService.getAllLangs();
    $scope.lang = 'en'

    $scope.gridOptions = {
      columnDefs: [
        { displayName: 'NAME', field: 'name', headerCellFilter: 'translate' },
        { displayName: 'GENDER', field: 'gender', headerCellFilter: 'translate' },
        { displayName: 'COMPANY', field: 'company', headerCellFilter: 'translate', enableFiltering: false  }
      ]
    };
    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}]);

app.config(function ($translateProvider) {
  $translateProvider.translations('en', {
    GENDER: 'Gender',
    NAME: 'Name',
    COMPANY: 'Company'
  });
  $translateProvider.translations('de', {
    GENDER: 'Geschlecht',
    NAME: 'Name',
    COMPANY: 'Unternehmen'
  });
  $translateProvider.preferredLanguage('en');
});

第一个屏幕截图是指默认语言英语。当我将语言更改为 'de' 时，网格菜单选项不会被翻译。我怎样才能做到这一点？

Answer 1

Working Plnkr

在控制器中添加以下方法：

  $scope.changeLanguage = function (key) {
    $translate.use(key);
  };

用ng-change调用此方法：

<select ng-model="lang" ng-options="l for l in langs" ng-change="changeLanguage(lang)"></select>

Answer 2

我需要即时翻译（无需刷新页面）那些自定义菜单项以及 "items per page" 等寻呼机中的内容。

我还直接在 ui-grid 源代码中写了一个 hack/workaround 代码所以分享它是否可以帮助其他人，至少直到有成为官方补丁。

首先在网格定义中处理语言更改的新事件苍蝇（例如通过 angular 动态语言环境）：

 onRegisterApi: function(gridApi) {

     gridApi.registerEvent('language', 'changed');
     gridApi.language.on.changed($scope, function(language) {

           $rootScope.$gridLanguage = language;

     });

然后在语言更改后的控制器中引发该事件（在我的 $localeChangeSuccess 来自 angular 动态语言环境) 的案例：
```
$scope.$on('$localeChangeSuccess', function (e, locale) {

    $scope.$View.GridApi.language.raise.changed(locale);

});
```

这里是黑客，例如，文本需要刷新添加 uiGridColumnMenu 指令 link 函数:

$scope.$watch('$parent.$root.$gridLanguage', function () {
     if ($scope.$parent.$root.$gridLanguage !== undefined) {
         $scope.menuItems = uiGridColumnMenuService.getDefaultMenuItems($scope);
    }
});

或 uiGridPager 相同：

$scope.$watch('$parent.$root.$gridLanguage', function () {

    if ($scope.$parent.$root.$gridLanguage !== undefined) {
        $scope.sizesLabel = i18nService.getSafeText('pagination.sizes');
        $scope.totalItemsLabel = i18nService.getSafeText('pagination.totalItems');
        $scope.paginationOf = i18nService.getSafeText('pagination.of');
        $scope.paginationThrough = i18nService.getSafeText('pagination.through');
    }

});

Answer 3

如果您正在使用 "Angular Translate"，要即时翻译网格，您应该只在 angular-translate 的事件“$translateChangeSuccess”被触发时刷新网格语言，如下所示：

// Get Fired when you change language using angular-translate
$rootScope.$on('$translateChangeSuccess', function (event, a) {
    $scope.language = $translate.proposedLanguage() || $translate.use();
    i18nService.setCurrentLang($scope.language); // Refresh the grid language
});

不要忘记注入 $rootScope 和 i18nService。

Angular UI 网格 - 即时翻译网格

Angular UI grid - Translate grid on fly

angularjs

angular-translate

angular-ui-grid