AngularJS dynamic lang attribute of html

html angularjs lang
Jorge Guerola picture Jorge Guerola · Oct 20, 2014 · Viewed 7.7k times · Source

I need some help for change dynamically the lang attribute of HTML:

<html lang="en">

I'm making a multilanguage web application with AngularJS and rest backend. Initially I can specify a default lang attribute, but I want to change it depending on the user browser or change it if the user selects inside the web application some language option.

There is some way to do it?

Answer

Debajit Majumder picture Debajit Majumder · Aug 5, 2016

If you don't want to add controller to your <html> tag and if you are using angular-translate then you can use a simple directive to achieve the same.

Angular-translates gives an event $translateChangeSuccess when your translation loaded successfully or when you change the language (I assume you will use $translate.use to change the current language). We can create a custom directive using that event.

Directive Code Snippet:

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 );

And you have add the same directive in you html attribute.

<html update-language>

Related questions

AngularJS ngClass conditional

Is there any way to make an expression for something like ng-class to be a conditional? For example, I have tried the following: <span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span> The issue with this …

Read More
How do I delete an item or object from an array using ng-click?

I am trying to write a function that enables me to remove an item when the button is clicked but I think I am getting confused with the function - do I use $digest? HTML & app.js: <ul …

Read More
AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?

Using AngularJS if I set a simple input text box value to something like "bob" below. The value does not display if the ng-model attribute is added. <input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40"/&…

Read More