html的AngularJS动态lang属性答案

【问题标题】：AngularJS dynamic lang attribute of htmlhtml的AngularJS动态lang属性
【发布时间】：2014-12-15 04:52:14
【问题描述】：

我需要一些帮助来动态更改 HTML 的 lang 属性：

<html lang="en">

我正在使用 AngularJS 和 rest 后端制作一个多语言 Web 应用程序。最初我可以指定一个默认的 lang 属性，但我想根据用户浏览器更改它，或者如果用户在 Web 应用程序中选择了一些语言选项，则更改它。

有什么办法吗？

【问题讨论】：

如果您将其中一个答案标记为正确答案会有所帮助，因为下面的答案非常有帮助。 :)

标签： html angularjs lang

【解决方案1】：

为了改进 Debajit 的回答，我调整了他的指令，以确保它在创建新元素和设置 preferredLanguage 时也能正常工作：

function updateLanguage( $rootScope, $translate ) {
    return {
      link: function( scope, element ) {
        var defaultLang = "en";
        element.attr("lang", $translate.use() || defaultLang );

        var listener = function( event, translationResp ) {
          var currentlang = translationResp.language;   
          element.attr("lang", currentlang || $translate.use() || defaultLang );
        };

        $rootScope.$on('$translateChangeSuccess', listener);
      }
   };
}
angular.module('app').directive( 'updateLanguage', updateLanguage );

只需将“更新语言”属性添加到任何元素，例如<html update-language>

【讨论】：

【解决方案2】：

如果您不想将控制器添加到您的 <html> 标记中，并且如果您正在使用 angular-translate，那么您可以使用 simple 指令 来实现相同的目的。

当您的翻译成功加载或更改语言时，Angular-translates 会发出一个事件$translateChangeSuccess（我假设您将使用$translate.use 更改当前语言）。我们可以使用该事件创建自定义指令。

指令代码片段：

function updateLanguage( $rootScope ) {
    return {
      link: function( scope, element ) {
        var listener = function( event, translationResp ) {
          var defaultLang = "en",
              currentlang = translationResp.language;

          element.attr("lang", currentlang || defaultLang );
        };

        $rootScope.$on('$translateChangeSuccess', listener);
      }
   };
}
angular.module('app').directive( 'updateLanguage', updateLanguage );

你已经在你的 html 属性中添加了相同的指令。

<html update-language>

【讨论】：

感谢这在更改语言时有效。但是，它最初或添加新元素（如模态）时不起作用。所以我做了一个小的补充来解决这个问题，请检查下面。
您能分享您的代码（github 或 fiddle 等）网址吗？您最初是如何加载翻译的？初始加载完成后，它应该引发事件 $translateChangeSuccess ，您将在其中获得当前语言并且它应该可以正常工作。在我的回答中，假设您将在应用程序的引导过程中加载翻译。
这是一个私人项目，我无法真正分享。使用 $translateProvider.preferredLanguage 在配置中设置初始语言。该事件未发送，或者可能在加载指令之前发送得太早。我的修复还涉及事后添加新元素。当然，当你只在 html 或 body 上使用它时，这并不重要。

【解决方案3】：

如果您想动态更改语言。只需在 html 标签中添加一个controller，然后更改语言即可。

试试这个：

<html ng-app="langChange" ng-controller="langCtrl" lang={{lang}}>

</html>

js代码：

var app = angular.module(langChange,[]);
app.controller("langCtrl",[$scope,function($scope){
            $scope.lang = "en";//here you can change the language dynamically
}])

【讨论】：

【解决方案4】：

如果您正在制作单页 Web 应用程序，那这有什么关系呢？但可以肯定的是，您可以将其更改为任何属性，例如使用<html lang="{{ lang }}">。如果你想拥有本地化的内容，那么你可以使用angular-translate。

【讨论】：