Блог

Главная - Вопросы по программированию - Angular UI grid — Перевод сетки на лету

Angular UI grid — Перевод сетки на лету

#angularjs #angular-ui-grid #angular-translate

#angularjs #angular-ui-grid #angular-перевести

Вопрос:

Я использую angular 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’, параметры меню сетки не переводятся. Как я могу это сделать?
введите описание изображения здесь

введите описание изображения здесь

Комментарии:

1. После некоторой возни я смог заставить ее работать, но только внеся довольно много изменений в их код. В конце концов, похоже, что это просто ошибка и сейчас она не поддерживается. Как ни странно, они написали директивы локализации для поддержки всего поведения, но еще не подключили их. Если вам нужна модифицированная версия, я с удовольствием напишу дополнение, но, учитывая, что файл имеет длину 28 тысяч строк, мне придется опубликовать его на стороннем веб-сайте.

2. Хорошо. Спасибо за ваш вклад

3. Я забыл упомянуть, локализация для выпадающих списков действительно существует, но устанавливается только при запуске и никогда не будет обновляться после факта. Если вы сможете узнать, как принудительно обновить таблицу, возможно, вам удастся заставить ее работать. Однако это, скорее всего, приведет к удалению состояния вашей таблицы.

4. ДА. Я согласен. Обновление таблицы приведет к удалению состояния таблицы. В документах говорится, что перевод происходит только при рендеринге сетки. Не уверен, возможно ли обновить сетку без потери ее состояния.

Ответ №1:

Чтобы перевести сетку на лету, если вы используете «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.

Ответ №2:

Мне нужно было перевести на лету (без обновления страницы) эти пользовательские пункты меню, а также «элементы на странице» и тому подобное в пейджере.

Я также написал хак / обходной путь непосредственно в исходном коде ui-grid, чтобы поделиться, если это может помочь кому-то еще, по крайней мере, до тех пор, пока не появится официальный патч.

  • сначала при определении сетки создается новое событие для обработки языка, измененного на лету (например, через angular dynamic locale):

      onRegisterApi: function(gridApi) {

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

           $rootScope.$gridLanguage = language;

     });

  • затем в контроллере после изменения языка вызвать это событие (в моем
    обращение к $localeChangeSuccess из angular dynamic locale) :

     $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');
    }

});

Ответ №3:

Рабочий 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>

Комментарии:

1. Это изменяет заголовки столбцов, но не параметры меню. Проверьте параметры сортировки по возрастанию, убыванию и скрыть столбец в каждом из столбцов сетки. Параметры меню столбца не переводятся.