角度转换不适用于角度数据表的自定义分页和信息

Question

我在我目前的项目中使用Angular Datatable和Angular Translate。

我为datatable创建了一个自定义分页和信息，如下所示：

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

语言en.json

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

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

我用过

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

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

问题出在哪儿？

Answer 1

我想在任何翻译之前使用$translate，因为它，它无法正常工作。所以我使用了$translateChangeSuccess event(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');

});