角度转换不能在角度数据表的自定义分页和信息

Question

我在当前项目中使用Angular Datatable和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": "" 
    } 
}; 

和DataTable 选项是：

$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事件(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'); 

});