角度轉換不能在角度數據表的自定義分頁和信息

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

});