feat(locale): Maintain <html>s lang attribute

Angular-localization will now update the `lang` attribute of the root `html` tag to match the current locale's language This closes #22 because users can now use the lang attribute in their css to change the direction of the document and/or add any other language specific css Example: ```css html[lang=ar] { direction: rtl; } ```
doshprompt · Aug 17, 2015 · 9d7e06c · 9d7e06c
1 parent 1ce1284
commit 9d7e06c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/localization.js b/src/localization.js
@@ -2,6 +2,7 @@ angular.module('ngLocalize')
     .service('locale', function ($injector, $http, $q, $log, $rootScope, $window, localeConf, localeEvents, localeSupported, localeFallbacks) {
         var TOKEN_REGEX = new RegExp('^[\\w\\.-]+\\.[\\w\\s\\.-]+\\w(:.*)?$'),
 
+            $html = angular.element(document.body).parent(),
             currentLocale,
             deferrences,
             bundles,
@@ -227,6 +228,12 @@ angular.module('ngLocalize')
             return result;
         }
 
+        function updateHtmlTagLangAttr(lang) {
+            lang = lang.replace(/\-.+/, '');
+
+            $html.attr('lang', lang);
+        }
+
         function setLocale(value) {
             var lang;
 
@@ -249,6 +256,8 @@ angular.module('ngLocalize')
                 deferrences = {};
                 currentLocale = lang;
 
+                updateHtmlTagLangAttr(lang);
+
                 $rootScope.$broadcast(localeEvents.localeChanges, currentLocale);
                 $rootScope.$broadcast(localeEvents.resourceUpdates);
 

diff --git a/tests/unit/serviceSpec.js b/tests/unit/serviceSpec.js
@@ -35,5 +35,12 @@ describe('service', function () {
         it('should validate tokens with whitespace', inject(function (locale) {
             expect(locale.isToken('test.hello world')).toBe(true);
         }));
+
+        it('should update the lang attribute of the html tag', inject(function (locale) {
+            locale.setLocale('en-US');
+            expect(angular.element(document.body).parent().attr('lang')).toBe('en');
+            locale.setLocale('fr-FR');
+            expect(angular.element(document.body).parent().attr('lang')).toBe('fr');
+        }));
     });
 });