Angular 翻译在 angular 数据表的自定义分页和信息中不起作用

Question

我在当前项目中使用 Angular Datatable and Angular Translate。

我为数据表创建了自定义 分页和信息，如下所示：

var language = {
    "sEmptyTable": "<div class='alert alert-primary text-center m-auto w-25'>" + $filter('translate')('TABLE.S_EMPTY_TABLE') + "</div>",
    "sInfo": "show <b>_START_</b> until <b>_END_</b> of <b>_TOTAL_</b> records",
    "sInfoEmpty": "show 0 until 0 of 0 records",
    "sInfoFiltered": "(filtered of _MAX_ records)",
    "sInfoPostFix": "",
    "sInfoThousands": ",",
    "sLengthMenu": "show _MENU_ records",
    "sLoadingRecords": "<div class='inlineLoading'><span class='img'></span> <span class='text'>" + $filter('translate')('GLOBAL.LOADING') + "</span> </div>",
    "sProcessing": "<div class='inlineLoading'><span class='img'></span> <span class='text'>" + $translate.instant('TABLE.S_PROCESSING') + "</span> </div>",
    "sSearch": "search", 
    "sZeroRecords": "<div class='alert alert-primary text-center m-auto w-25'>" + $filter('translate')('TABLE.S_ZERO_RECORDS') + "</div>",
    "oPaginate": {
       "sFirst": "<span class='mdi mdi-chevron-double-left' title='first'></span>",
       "sLast": "<span class='mdi mdi-chevron-double-right' title='last'></span>",
       "sNext": "<span class='mdi mdi-chevron-right' title='next'></span>",
       "sPrevious": "<span class='mdi mdi-chevron-left' title='prev'></span>"
    },
    "oAria": {
       "sSortAscending": "",
       "sSortDescending": ""
    }
};

而数据表选项是：

$rootScope.dtOptions = DTOptionsBuilder.fromSource()
    .withLanguage(language)
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withDataProp('data')
    .withOption('initComplete', function() {
       angular.element('.table input').attr('placeholder', 'search...');
    })
    .withPaginationType('full_numbers');

app.config

$translateProvider.useStaticFilesLoader({
    prefix: 'app/resources/lang-', // path to translations files
    suffix: '.json'
 });
 $translateProvider.preferredLanguage('en'); // default language
 $translateProvider.useSanitizeValueStrategy('sanitize');
 $translateProvider.useLocalStorage(); // saves selected language to localStorage

lang-en.json

...
{
  "TABLE": {
      "S_PROCESSING": "peoesing...",
      "S_ZERO_RECORDS": "no rcordfound",
      "LOADING": "ding..."
  }
}
...

现在我想在这个自定义分页和信息中使用angular翻译。（看var language= {}）

我用过

$filter('translate')('GLOBAL.LOADING') 和 $translate.instant('TABLE.S_PROCESSING')

但是它们都不起作用，每个翻译变量的字符串显示为例如：GLOBAL.LOADING 或 TABLE.S_PROCESSING 而不是翻译！

问题出在哪里？

Answer 1

我想在任何翻译之前使用 $translate，因此，它无法正常工作。所以我使用了 $translateChangeSuccess 事件 (one of angular translate events) 并在回调函数中调用了一个具有数据表选项和配置的函数。

$rootScope.$on('$translateChangeSuccess', function (event) {
    datatableInit();
});


function datatableInit() {

  var language = {
    "sEmptyTable": "<div class='alert alert-primary text-center m-auto w-25'>" + $filter('translate')('TABLE.S_EMPTY_TABLE') + "</div>",
    "sInfo": "show <b>_START_</b> until <b>_END_</b> of <b>_TOTAL_</b> records",
    "sInfoEmpty": "show 0 until 0 of 0 records",
    "sInfoFiltered": "(filtered of _MAX_ records)",
    "sInfoPostFix": "",
    "sInfoThousands": ",",
    "sLengthMenu": "show _MENU_ records",
    "sLoadingRecords": "<div class='inlineLoading'><span class='img'></span> <span class='text'>" + $filter('translate')('GLOBAL.LOADING') + "</span> </div>",
    "sProcessing": "<div class='inlineLoading'><span class='img'></span> <span class='text'>" + $translate.instant('TABLE.S_PROCESSING') + "</span> </div>",
    "sSearch": "search", 
    "sZeroRecords": "<div class='alert alert-primary text-center m-auto w-25'>" + $filter('translate')('TABLE.S_ZERO_RECORDS') + "</div>",
    "oPaginate": {
       "sFirst": "<span class='mdi mdi-chevron-double-left' title='first'></span>",
       "sLast": "<span class='mdi mdi-chevron-double-right' title='last'></span>",
       "sNext": "<span class='mdi mdi-chevron-right' title='next'></span>",
       "sPrevious": "<span class='mdi mdi-chevron-left' title='prev'></span>"
    },
    "oAria": {
       "sSortAscending": "",
       "sSortDescending": ""
    }
  };

  $rootScope.dtOptions = DTOptionsBuilder.fromSource()
    .withLanguage(language)
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withDataProp('data')
    .withOption('initComplete', function() {
       angular.element('.table input').attr('placeholder', 'search...');
    })
    .withPaginationType('full_numbers');

});

Angular 翻译在 angular 数据表的自定义分页和信息中不起作用

Angular translate not working in angular datatable's custom pagination and info

javascript

datatable

angularjs

angular-translate

angular-datatables