如何动态地更改HTML标题标签和AngularJS翻译成多种语言 [英] How to change html title tag dynamically and translated to languages in AngularJS

问题描述

我有一个AngularJS的Web应用程序。我想dinamically改变一页的标题。我想配置是考虑到的语言，所以标题应该显示在不同语言

I have an AngularJS web application. I would like to change page´s title dinamically. I would like the language configured is taken into account, so title should be displayed in different languages.

我要successed改变dinamically标题，当我浏览到不同的页面。我得到这个职位的第三种方法<一href=\"http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view\">How基于angularjs局部视图动态地更改标题？它看起来最简单的，我（我的意思是使用$ rootScope的）。

I successed to change the title dinamically when I navigate to different pages. I got the third approach of this post How to dynamically change header based on angularjs partial view? which looked the most simple for me (I mean the one using $rootScope).

我只有一个问题。当I'm一个页面上，let's说指数和let's假设语言配置为英语，在英语学习中正确显示的标题。但是，如果我更改语言，例如，在西班牙（在导航栏下拉），标题不会改变。如果我浏览到另一个页面，标题正确显示在西班牙语。

I have just an issue. When I´m on a page, let´s say index, and let´s suppose the language configuration is english, the title is displayed correctly in english. But If I change the language, in example to spanish (in a dropdown in navigation bar), the title does not change. If I navigate to another page, the title is correctly displayed in spanish.

请找到，相关的code：

Please find, the relevant code:

HTML

<title ng-bind="title"></title>

每个控制器：

.controller('HomeCtrl', function HomeCtrl($scope, $rootScope, $translate) {

        $rootScope.title = $translate('PAGE_TITLE_INDEX');
        ...
}


.controller ('AboutCtrl', function ($scope, $rootScope, $translate) {               

        $rootScope.title = $translate('PAGE_TITLE_ABOUT');
        ...
}

语言选择下拉

<div ng-controller="LocationCtrl" style="padding-top: 5px">
            <select class="bootstrap-select-language show-tick" 
                    ng-change="changeLanguage(langKey)" 
                    ng-model="langKey" 
                    data-header="Choose your language..." 
                    ng-options="language.locale as language.name for language in translationLanguages"                  
                    bs-select
                    data-width="150px">                                  
            </select>           
        </div>

翻译功能控制器中

TRANSLATION FUNCTION IN CONTROLLER

$scope.changeLanguage = function (langKey) {
            $scope.langKey = langKey;
            $translate.uses(langKey);
            ...
}

更新

我觉得对于这种情况，在上述职位的第一种方法是正确的（我的意思是，保持标题的服务，并得到从控制器设置）。这样，您就可以得到翻译器目前的标题值，dinamically改变它。对吧？

I think for this scenario, the first approach in the above post is the right one (I mean, keeping the title in a service and get and set from the controllers). This way you can get the current title value in the translations controller and change it dinamically. Right?

推荐答案

您使用的应该罚款的方法。在＆LT;标题＆GT; 不会改变，因为 $ translate.uses（langKey）; 不会改变任何东西在 $ rootScope 。你可以试试这个：

The approach you used should be fine. The <title> isn't changed because $translate.uses(langKey); doesn't change anything on the $rootScope. You can try this:

// i.e. for the HomeCtrl
$scope.changeLanguage = function (langKey) {
    $scope.langKey = langKey;
    $translate.uses(langKey);
    $rootScope.title = $translate('PAGE_TITLE_INDEX');
}

---

更新：如果你不希望具备的功能在每个控制器，我想与您现有的code基的最简单的方法是：

---

UPDATE: If you don't want to have the function in every controller, I think the most straightforward way with your current code base is:

angular.module('your-module')
.run(function($rootScope, $translate) {
    // serves as a cache
    var currentTitleKey = '';

    $rootScope.$on('changeTitle', function(e, titleKey) {
        // update if parameter is defined, else reuse
        currentTitleKey = (titleKey || currentTitleKey);

        $rootScope.title = $translate(currentTitleKey);
    });
});

您的页的控制器（即 HomeCtrl ）将变成：

Your page controller (i.e. HomeCtrl) would become:

// doesn't need $rootScope
$scope.$emit('changeTitle', 'PAGE_TITLE_INDEX');

和 LocationCtrl 只想做的：

$scope.changeLanguage = function (langKey) {
    $scope.langKey = langKey;
    $translate.uses(langKey);
    // refresh current title
    $scope.$emit('changeTitle');
}

这篇关于如何动态地更改HTML标题标签和AngularJS翻译成多种语言的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！