Question

我正在使用角度ui-grid。我想在飞行中翻译网格。例如，我目前的语言是英语。网格以英语呈现。现在我切换到法语。我希望我的所有菜单选项都翻译成法语。我怎样才能做到这一点？这是我与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

我需要动态翻译（没有页面刷新）这些自定义菜单项以及“每页的项目”等在寻呼机中。

我还直接在ui-grid源代码中编写了一个hack / workaround ，以便共享它是否可以帮助其他人，至少在有正式补丁之前。

首先在网格定义中处理语言的新事件已更改苍蝇（例如通过角度动态区域设置）：

onRegisterApi: function(gridApi) { gridApi.registerEvent('language', 'changed'); gridApi.language.on.changed($scope, function(language) { $rootScope.$gridLanguage = language; });

然后在语言改变之后在控制器中提升该事件（在我的来自角度动态区域设置的$ localeChangeSuccess 上的案例：

$scope.$on('$localeChangeSuccess', function (e, locale) { $scope.$View.GridApi.language.raise.changed(locale); });

这里是黑客，例如，文本需要刷新添加 uiGridColumnMenu 指令链接功能：

$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 2

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 3

要在使用“ Angular Translate”时动态翻译Grid，仅应在触发angular-translate事件“ $ translateChangeSuccess”时刷新Grid语言，如下所示：

// 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网格 - 在飞行中翻译网格

3 个答案: