Question

我正在使用AngularJS和Angular UI Bootstrap。对于i18n，我使用的是angular-translate，它提供了一个过滤器| translate来处理翻译。使用以下代码时，previous-text指令的next-text和pager不会在视图中更新，而更改语言时所有其他标签都会正确更改。

如何强制寻呼机指令重新渲染当前的翻译？我应该在angular-ui或angular-translate中将其作为错误/新功能来解决吗？

其他组件也会出现相同的行为（例如警报）。

<div ng-controller="LanguageCtrl">
    <a href="#{{$location.path()}}" ng-click="switchLang('de_CH')">DE</a>
    <a href="#{{$location.path()}}" ng-click="switchLang('fr_CH')">FR</a>
</div>

<pager total-items="size" items-per-page="10" page="page" 
    previous-text="{{'PREV' | translate}}" 
    next-text="{{'NEXT' | translate}}"/>

这里是用于切换语言的控制器：

angular.module('myApp')
.controller('LanguageCtrl', ['$translate', '$scope',
    function ($translate, $scope) {
        $scope.switchLang = function (lang) {
            $translate.uses(lang);
        };
    }]);

更新1

注意：当我重新加载页面时，标签会以所需语言正确显示！但我想在不重新加载的情况下实现它。

Answer 1

有趣！由于您正在使用过滤器，因此下一个$ digest周期应该实际选择。显然它确实如此，否则语言在页面重新加载后不会改变。

我认为我们必须在这里查看angular-ui寻呼机的引擎。也许寻呼机指令缓存给定的标签？

Answer 2

我遇到了同样的问题，但我看了Pagination doc，似乎-text atrributes标记为C。来自文档

此设置可以在常量服务中全局配置

-text属性看起来像一个常量。在页面指令之外我打印出{{ 'PREV' | translate }}，它按预期工作并挂起在分页指令中。我认为在页面上强制对区域设置敏感的重载状态是一个不错的选择。我这样做，但你可以重写我的代码，使用主要想法

装饰

$provide.decorator('$state', function($delegate, $stateParams) {
        $delegate.forceReload = function() {
            return $delegate.go($delegate.current, $stateParams, {
                reload: true,
                inherit: false,
                notify: true
            });
        };
        return $delegate;
    });

使用

$rootScope.$on(APP_EVENTS.LOCALE_CHANGED, function (event, data) {
    $state.forceReload();
});

<强>已更新

我发现在没有刷新整个页面的情况下，重新渲染一个分页指令是一种欺骗。它对total-items属性很敏感。

var total = $scope.totalItems;
$scope.totalItems = 0
$scope.totalItems = total;

重新呈现指令，并使用新的本地化字符串重新呈现所有-text属性。

Answer 3

我还没有对它进行过测试，但以下看起来似乎可行：

angular.module('myApp')
.controller('LanguageCtrl', ['$translate', '$scope',
    function ($translate, $scope) {
        $scope.switchLang = function (lang) {
            $translate.uses(lang);
        };
        $scope.$on('$translateChangeSuccess', function () {
            // this will be called after switching languages,
            // so you could force a $scope.PREV here and
            // change your HTML to use a variable.
            // However, maybe just calling $translate will
            // force your frontend to update
            $translate('PREV');
            $translate('NEXT');
        });
    }]);

Answer 4

我在更新值方面遇到类似问题，并发现使用＆＃39; apply（）＆＃39;工作。也许试试这个;

function ($translate, $scope) {
$scope.switchLang = function (lang) {
    $scope.$apply(function() {
        $translate.uses(lang);
    });
};}]);

标签文本更改时，Angular UI pager指令不会重新呈现

4 个答案: