使用角度翻译切换语言时重新渲染角度数据表答案

【问题标题】：Rerender angular-datatables when switching language with angular-translate使用角度翻译切换语言时重新渲染角度数据表
【发布时间】：2015-06-22 14:51:21
【问题描述】：

我将 angular-translate 与 angular-datatables 一起使用，并实现了德语和英语之间的语言切换（在此处解释 Switching between languages。切换语言效果很好，但不适用于 angular-datatables。当我切换 angular-datatables 时，会保留旧的翻译表头。

角度数据表控制器：

它通过带有承诺的 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 使用当前选择的语言重新呈现表格？

【问题讨论】：

标签： angularjs datatables angular-translate

【解决方案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);
 }

     $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'),
    .........

为我工作；）

【讨论】：

【解决方案2】：

有点晚了，但这是一个答案，这不是最好的恕我直言：

$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 代码命名的语言文件。所以你必须将它们转换成英文的“长”语言名称。

【讨论】：