Voici un exemple de fichier de langue JSON i18n pour l'anglais: et voici ma vue HTML: le J'utilise la fonction suivante dans mon contrôleur d'affichage pour charger le fichier de langue basé sur la langue sélectionnée et transmettre-le dans traduction Global config dans mon main.js comme ce qui suit: traduction config dans mon traduction = "projet.sponsorinfo.main" dans l'étiquette Question:
$ portée.projectjson afin que je puisse l'appeler dans ng-répéter dans ma vue HTML:
Le problème Est-ce que, après avoir basculé la langue, les menus déroulants ne sont pas changés dans la langue sélectionnée, à moins que je vous rafraîchis ou ne change de vision et revenez. Comment puis-je résoudre ce problème de manière à ce que cela fonctionne comme l'étiquette Annexe:
mainctrl.js :
5 Réponses :
ancien fort> Parce que vous utilisez une fonction ASYNC angulaire ne reconnaîtra pas immédiatement le changement.
Après avoir téléchargé les fichiers, ajoutez p> $http.get('assets/i18n/'+lang+'.json').success(function(data) {
$scope.projectJSON= data;
$translate.use(lang);
if (!$scope.$$phase)
$scope.$apply();
$translate.refresh();
});
Où devrais-je ajouter ceci? Pourriez-vous écrire une réponse complète? Merci
J'utilise habituellement $ étendue. $ Appliquer () avec un si auparavant, il ne s'agit pas d'erreurs lorsqu'il y a un digest en cours. Comme: si (! $ De portée. $$ phase) $ portée. $ Apply ()
Aussi .. Sur une question non liée .. succès et erreur sont obsolètes. Vous devriez utiliser puis et attraper
@lascort Pourriez-vous écrire votre suggestion comme une réponse s'il vous plaît? afin que je puisse voir exactement ce que vous voulez dire.
Je l'ai ajouté à la réponse
Astasian, votre réponse ne fonctionne pas. ni la version éditée. Je dois encore rafraîchir de voir les traductions de la langue choisie.
S'il vous plaît essayez cette version. Il semble que vous devez appliquer la mise à jour à $ traduire aussi.
Je l'ai essayé, toujours pas de résultat! Seulement quand je rafraîchis ma page ou changer de vision à une autre puis revenez. Sinon, lorsque je bascule sur le bouton de langue, les menus déroulants sont toujours dans la langue précédente.
Pouvez-vous s'il vous plaît réessayer? Ajouté $ traduction.use (lang);
Encore une fois, j'ai essayé votre modification $ traduction.use (lang); , aucun résultat!
Oui, je sais ce que disent les sources officielles. Mais comment puis-je résoudre le problème maintenant? Que dois-je faire exactement? Je suis confus.
Essayez d'utiliser un motif de promesse:
$scope.projectJSON = response.data;
Vérifiez ce que vous obtenez exactement dans le .Chen .
Avez-vous essayé de recharger l'état?
$ state.reload ();
J'utilise Ui-routeur! que devrais-je faire?
J'ai mis à jour la réponse. Je crois qu'un équivalent à rafraîchir l'état est $ State.Reload () Comme on l'a vu ici: Stackoverflow.com/Questtions/21714655/...
Mon application se casse, ne se charge plus. Voici mon code de contrôleur complet. Pastebin.com/icg4rce2 Je pourrais avoir d'autres fonctions qui sont conflictuelles.
Débarrassez-vous de $ route et $ TemplateCache. Vous n'auriez peut-être pas référencé le fichier angulaire associé ni inclus le service ngroute dans la déclaration de l'application. Se débarrasser de celui-ci et n'essayez que l'état $.Reload ();
ça ne marche pas. Je risquais peut-être mal mettre en œuvre le code, pourriez-vous modifier la réponse afin de pouvoir voir exactement ce que vous voulez dire.
Mis à jour le code. Pouvez-vous simplement créer un plumker et y ajouter votre code? PLNKR.CO
permet de passer à pas à l'étape:
1) le traduction = "projet.sponsorinfo.main" dans l'étiquette montrent à juste titre la valeur "Sélectionnez le nom du sponsor" sans rafraîchir
2) Les menus déroulants ne sont pas modifiés dans la langue sélectionnée, à moins que vous ne vous rafraîchissez pas ou ne changez de vue et revenez.
Donc, la bascule pour la traduction fonctionne réellement. Mais pourquoi cela ne fonctionne pas pour les menus déroulants?
Une chose que nous pouvons noter, c'est que l'étiquette pour L'option Select est en train d'être compilée pour la première fois lors de la saisie de la page et de ne pas être recompilée après avoir changé vos langues. En tant que tel, lorsque vous basculez la traduction, vous récupérez le texte, mais l'élément d'option Select n'est pas en cours de recompilation et n'est donc pas traduit à la volée jusqu'à votre prochaine retenance / rechargement de la vue. Vous avez Peu de façons de résoudre le problème:
1) Actualisez de manière programmée L'état / la route une fois que la traduction est terminée. (Correction rapide mais mauvaise) une idée de la procédure à suivre pour obtenir une deuxième solution: project.sponsorinfo.main est un texte statique tandis que s.spons est dynamique basé sur la valeur de la valeur.
2) Écrivez une directive angulaire qui recompilez l'élément une fois que les changements de langue détectent. (meilleure approche)
Où devrais-je mettre la directive? À l'intérieur de My View Controller JS File? ou dans mon fichier Main.js? Mon code HTTP est dans mon fichier View Controller JS.
Où devrais-je mettre cet élément de sélection? Où mettre la directive? Pourriez-vous s'il vous plaît donner une explication? Merci
Vous conservez l'élément SELECT sur l'endroit où vous avez mis initialement. Voici comment vous mettez la directive PLNKR.CO/EDIT/?P=PREVIEW
Votre lien de plumbler n'est pas complet.
Vous êtes une matrice itération du fichier JSON de traduction. Ce fichier JSON de traduction est chargé par Dans votre code Une demande est effectuée en exécutant cette ligne Ce que vous pouvez faire est d'écouter sur J'ai testé le code suivant dans votre exemple et cela fonctionne bien. P> $ traduction code> et vous n'aurez pas accès sur le contenu chargé, mais vous avez besoin des données de ce fichier JSON pour l'itération, vous devez ainsi faire votre propre demande d'aller chercher ce tableau. Peut-être que vous ne voulez pas, mais vous devez faire $ http.get code> appel. var lang = $ traduction.utilisateur (NewLang) ; code> et deuxième appel est effectué par $ http.get code> mais si $ http.get code> est résolu avant appel dans $ traduction.Utilise est résolu, il ne traduira pas le contenu de liste déroulante car la demande dans $ traduction.use code> n'est pas encore résolue et $ Traduction code> ne dispose pas de ces traductions à traduire. $ translatechangeSuccess code> Evénement (émis par $ Traduction code> Traduire code> service) sur $ Rootscope code> puis Faites votre appel Ajax dans ce gestionnaire. P> [Mise à jour] H3>
$translate.use(proposedLanguage || preferredLanguage);
Fondamentalement, je ne devrais pas devoir faire ceci $ http, car l'étiquette est en cours de traduction avec le code dans le MAIN.JS et MAINCTRL.JS. J'utilise ce piratage pour charger séparément mon langage JSON JSON (car il est déjà fait par Main.js et Mainctrl) pour nourrir les menus déroulants. C'est pourquoi il ne se traduit pas immédiatement, il devrait être rafraîchi. où l'étiquette est en cours de traduction sur place.
Sans demande supplémentaire, vous ne pourrez pas accéder aux données de traduction. Vous devez donc faire cette demande si vous souhaitez obtenir des données. Puis-je savoir pourquoi voulez-vous afficher les données du fichier JSON de traduction? Quel est votre objectif final?
Je ne veux pas charger la traduction JSON du tout! Je veux que cela fonctionne pour des articles déroulants car il travaille pour d'autres parties de l'application, sans chargement du fichier JSON! Je dois charger manuellement le même JSON pour les menus déroulants! Cependant, la traduction fonctionne pour les titres de la table sans recharger le JSON.
Les trois dernières lignes doivent être incluses dans quel fichier? Main.js, Mainctrl.js, ou le contrôleur de vue? Que diriez-vous de cette ligne $ étendue.language.selected = $ portée.language.Available [(PropositionLanguage || PreferredLanguage)]; devrait-il être supprimé?
En fait, cela fonctionne !! Mais lorsque la page est accessible pour la première fois après la connexion ou en d'autres termes, sans cliquer sur la langue basculante, les menus déroulants ne sont pas chargés! Ils ne sont chargés qu'après que je bascule la langue et qu'ils montrent les menus déroulants dans la langue choisie. C'est bien! Mais ils ne montrent pas à moins que vous changiez la langue puis cela fonctionne bien! Comment charger le menu déroulant par défaut pour la langue par défaut?
Je ne reçois pas le point de ce code ici $ portée.changelanguage = fonction (newlang) {$ traduction.use (newlang); } Qu'est-ce que c'est censé faire? Que ce soit inclus ou non, il ne joue aucun rôle dans l'histoire! Je serais peut-être en train de manquer quelque chose ici.
$ portée.changelanguage = fonction (newlang) {$ traduction.use (newlang); } Ceci fait la même chose que votre $ étendue.language.set fonction, juste je l'ai copié de mon exemple.
Les trois dernières lignes doivent être incluses dans votre méthode init . Lorsque la page est chargée, il obtient la langue et donne à $ traduire service pour faire appel et charger des traductions. Mettre ces lignes dans votre méthode init
@ZurasekhniaShvili $ portée.changelanguage = fonction (newlang) {$ traduction.use (newlang); } Où devrait-il être inclus alors? Il n'est pas appelé nulle part, autant que je sache, qu'est-ce que c'est censé faire? Où devrait-il aller? Avez-vous lu mon commentaire ci-dessus en ce qui concerne le petit problème sur la charge de la première page et la liste déroulante ne s'affiche pas avant que la bascule est cliquée?
Oubliez ce $ portée.changelanguage = fonction (newlang) {$ traduction.use (newlang); } . Vous n'avez pas besoin de cela. J'ai essayé ma réponse à être général, mais je pense que vous n'avez pas compris, alors j'ai mis à jour ma réponse. Laissez-moi savoir si vous avez encore besoin d'aide
@ZurasekhniaShvili Voici comment le code ressemble à la partie init: Pastebin.com/y0gwkkjw , il manque quelque chose ? Il me donne une erreur d'obtention, actifs / i18n / anglais.json non trouvé! En fait, mon nom de fichier est en.json pas anglais.json
@Mpondomise Essayez ceci $ TRADUCTATE.Utilisez (proposéLanguage || préféréLanguage); au lieu de celui-ci $ $ TRADUCT.Utilisé (code>.
Mettez ce $ traduction.Utilisez (ProposéLanguage || PreferredLanguage); à la fin de la fonction init.
Essayez d'utiliser le modèle de promesse: $ http.get (..). Ensuite (fonction (réponse) {..})
@Vadim s'il vous plaît écrivez votre suggestion comme une réponse complète.
Hey serait-il possible pour vous les mettre ensemble et mettre un code de code ou plunkr, en état de marche à la caisse?
@Mpondomise, avez-vous résolu votre problème?
@Maximus pas encore! Je cherche toujours une solution. Avez-vous des?
@Mpondomise, alors ce que vous dites, c'est qu'après cette ligne exécutée
$ étendue.projectjson = données; la valeur dans@Mpondomise, je vois que vous essayez de lire l'étiquette principale et la répétition NG de deux manières différentes. L'étiquette principale comme - projet.sponsorinfo.main "et dans la répétition ng comme projecjson.project.sponsorinfo.sponsorlist. Est-ce correct?
@Sreekantth Oui, je veux lire ma répétition NG aussi comme l'autre. Je ne veux pas charger la langue spécifique json séparément. Parce que cela est déjà automatiquement effectué pour l'étiquette, qui est chargé. Mais quand il s'agit de répéter NG, je ne peux pas faire la même chose.
Dans ce cas, NG-REPEAT = "S dans projecjson.project.sponsorinfo.sponsorlist" devrait être ng-répéter = "s dans projet.sponsorinfo.sponsorlist" n'est-ce pas? au lieu d'un projecteur supplémentaire au début
@Sreekantth Oui, mais ça ne marche pas!
Vous devez utiliser
ng-options en premier lieu.@zeroflagl Comment ça change le problème? Est-ce que tout change le problème? Pourriez-vous suggérer une réponse à cette question?