Ho bisogno di aiuto per cambiare dinamicamente l'attributo lang di HTML:AngularJS dinamica di html
<html lang="en">
Sto facendo un'applicazione web multilingua con AngularJS e back-end di riposo. Inizialmente posso specificare un attributo lang predefinito, ma desidero cambiarlo in base al browser dell'utente o modificarlo se l'utente seleziona all'interno dell'applicazione Web un'opzione della lingua.
C'è un modo per farlo?
Se si sta creando un'applicazione web a pagina singola, perché ciò è importante? Ma certo, puoi cambiarlo come qualsiasi attributo, usando ad es. <html lang="{{ lang }}">. Se si desidera avere contenuti localizzati, è possibile utilizzare angular-translate.
Se si desidera modificare la lingua in modo dinamico. semplicemente puoi aggiungere uno controller al tag html e quindi cambiare la lingua.
Prova questo: codice
<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
}])
Se non si desidera aggiungere controller per il tag <html> e se si utilizza angular-translate quindi è possibile utilizzare un direttiva semplice per raggiungere lo stesso.
Angular-translates fornisce un evento $translateChangeSuccess quando la traduzione è stata caricata correttamente o quando si modifica la lingua (presumo che userete $translate.use per cambiare la lingua corrente). Possiamo creare una direttiva personalizzata usando quell'evento.
direttiva Snippet di codice:
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);
E avete aggiungere lo stesso direttiva in voi attributo HTML.
<html update-language>
Grazie funziona quando si modifica una lingua. Tuttavia non funziona inizialmente o quando si aggiunge un nuovo elemento (come un modale). Quindi ho fatto una piccola aggiunta per risolvere questo problema, controlla di seguito. – Janneman
Puoi condividere il tuo codice (github o fiddle ecc.)? Come stai inizialmente caricando le traduzioni? Dopo aver completato il caricamento iniziale, dovrebbe generare l'evento $ translateChangeSuccess dove si otterrà la lingua corrente e dovrebbe funzionare correttamente. Nella mia risposta, si è presunto che carichereste le traduzioni durante il bootstrap della vostra app. –
È un progetto privato che non posso davvero condividere. La lingua iniziale è impostata nella configurazione usando $ translateProvider.preferredLanguage.L'evento non viene inviato, o forse inviato troppo presto prima che la direttiva venga caricata. La mia correzione riguarda anche l'aggiunta di nuovi elementi in seguito. Questo non importa quando lo si usa solo su html o body naturalmente. – Janneman
Per migliorare la risposta di Debajit, ho ottimizzato la sua direttiva per assicurarsi che funziona anche durante la creazione di nuovi elementi e quando PreferredLanguage è impostato:
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);
Basta aggiungere l'attributo 'update-lingua' a qualsiasi elemento, ad es <html update-language>
Sarebbe utile se contrassegnate una delle risposte come risposta corretta, poiché le risposte di seguito sono davvero utili. :) –