Question

我使用angular-translate与angular-datatables并实现了德语和英语之间的语言切换（这里解释Switching between languages。切换语言运行良好但不适用于角度数据表。当我切换角度数据表保持旧表格的翻译。

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>

总结：切换语言效果很好。但不是角度数据表的情况。它不会切换语言。但翻译字符串很好。

如何使用当前选择的语言让角度数据表重新渲染表格？

Answer 1

有点晚了，但这是一个答案，这不是最好的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代码一样的语言文件。因此，您必须将它们转换为英语“长”语言名称。

使用angular-translate切换语言时重新渲染角度数据表

1 个答案: