使用angular-translate切换语言时的Rerender angular-datatables

Question

我使用angular-translate和angular-datatables，并实现了德语和英语之间的语言切换(这里解释为Switching between languages。切换语言工作得很好，但不适用于angular-datatables。当我切换angular-datatables时，会保留表头的旧转换。

angular-datatables控制器：

它使用promise通过json加载数据表数据，然后绘制表格。它还每5分钟刷新一次表。我实现了一个公共函数"rerenderTable“，它是在切换应用程序语言时调用的。

.controller('DashboardCtrl', ['$scope', '$rootScope', 'DTOptionsBuilder', 'DTColumnBuilder', 'DTInstances', '$resource',
    '$interval', '$translate',
    function($scope, $rootScope, DTOptionsBuilder, DTColumnBuilder, DTInstances, $resource, $interval, $translate)
{
    $scope.initTargetPackaging = function initTargetPackaging()
    {
        $scope.sourceUrl = 'json/v1.0.0/dashboard/datatables/myjson1.json';
    };

    $scope.initTargetConversion = function initTargetConversion()
    {
        $scope.sourceUrl = 'json/v1.0.0/dashboard/datatables/myjson2.json';
    };

    // Get the TargetPackaging JSON Data with promise AJAX call
    var vm = this;
    vm.dtOptions = DTOptionsBuilder.fromFnPromise( function()
    {
        return $resource($scope.sourceUrl).query().$promise;
    })
        .withOption('bInfo', false)
        .withOption('paging', false)
        .withOption('filter', false)
        .withOption('rowCallback', rowCallback);

    // Create the table columns
    vm.dtColumns = [
        DTColumnBuilder.newColumn('customer')
            .withTitle($translate('DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_CUSTOMER')),
        DTColumnBuilder.newColumn('today')
            .withTitle($translate('DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_TODAY')),
        DTColumnBuilder.newColumn('week')
            .withTitle($translate('DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_7DAYS')),
        DTColumnBuilder.newColumn('month')
            .withTitle($translate('DIRECTIVES.DASHBOARD.DATATALBE_TARGET_PACKAGING_COLUMN_30DAYS'))
    ];

    vm.newPromise = newPromise;
    vm.reloadData = reloadData;
    vm.dtInstance = {};

    function newPromise()
    {
        return $resource($scope.sourceUrl).query().$promise;
    }

    /**
     * Reload the data
     */
    function reloadData()
    {
        var resetPaging = false;
        vm.dtInstance.reloadData(resetPaging);
    }

    // Trigger reloading - 5 mins
    $interval(reloadData, 300000);

    function rowCallback(nRow, aData)
    {
        // Add status CSS class if state is true
        if (aData['state'] != undefined
            && aData['state'] === true)
        {
            $(nRow).addClass('ad-status-inactive');
        }
    }

    $rootScope.rerenderTable = function()
    {
        vm.dtInstance.rerender();
    };
}]);

用于切换语言的函数：

$scope.changeLang = function(key)
{
    $translate.use(key).then( function(key)
    {
        console.log("Sprache zu " + key + " gewechselt.");
        $rootScope.rerenderTable();
    },
    function(key)
    {
        // Trigger log error message (failure of switching language)
    });
};

在html中触发：

<div id="language-switch" class="col-xs-2" ng-controller="LanguageCtrl">
    <div class="inner">
        {{ 'MAIN_NAVIGATION.CHOOSE_LANGUAGE' | translate }}
        <span ng-click="changeLang('en')" class="lang-sm" lang="en"></span>
        <span ng-click="changeLang('de')" class="lang-sm" lang="de"></span>
    </div>
</div>

摘要:切换语言效果很好。但在角度数据表的情况下不是这样。它不会切换语言。但是翻译字符串是很好的。

如何让angular-datatables使用当前选择的语言重新呈现该表？

Answer 1

1-收听语言更改，以便在之后呈现表格。

  $rootScope.$on('$translateChangeEnd', function (event, lang) {
    $scope.dtInstance.rerender();
  });

2-表的内部构造函数

 var headerCallback = function( thead, data, start, end, display ) {
        $compile(angular.element(thead).contents())($scope);
 }

3-

     $scope.dtOptions(your name) = DTOptionsBuilder
      .newOptions()
      .withOption('headerCallback', headerCallback)
      ..........your code

   $scope.dtColumns = [
     DTColumnBuilder.newColumn('code').withTitle(`${'<span translate>'}${'TAG'}${'</span>'}`).renderWith(your_code).withClass('center-text'),
    .........

适用于我;)

Answer 2

有点晚了，但这是一个答案，这不是最好的imho：

$rootScope.$on('$translateChangeSuccess', function (event, lang) {
    vm.dtOptions.withLanguageSource('http://cdn.datatables.net/plug-ins/1.10.11/i18n/'+(lang.language == 'de' ? 'German' : 'English')+'.json');
    $rootScope.rerenderTable();
  });

遗憾的是，他们没有提供像ISO代码那样命名的语言文件。因此，您必须将它们转换为英语的“长”语言名称。