Question

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

<html lang="en">

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

有办法吗？

Answer 1

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

当您的翻译成功加载或更改语言时，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>

Answer 2

如果要动态更改语言。只需将一个controller添加到html标记，然后更改语言即可。

试试这个：

<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
}])

Answer 3

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

Answer 4

为了改善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 );

只需添加＆＃39;更新语言＆＃39;属性为任何元素，例如<html update-language>

AngularJS动态lang属性的html

4 个答案: