Сменить язык - экран становится белым - PullRequest
Новая
       29

Сменить язык - экран становится белым

3 голосов
/ 31 октября 2019

Как правильно использовать флажок для изменения значения $ rootScope в AngularJS

Я пытаюсь создать многоязычный раздел для приложения, который позволяет пользователям на переднем плане выбирать предпочтительный язык при загрузке приложения.

При этом я установил $rootScope.language на их предпочитаемый язык.

Поскольку это происходит только один раз при загрузке приложения, я хотел добавить раздел настроек, где они могутпри необходимости измените их выбор.

В моей инфраструктуре Ionic V1 я создал это в своем шаблоне, чтобы пользователи могли выбирать язык: 

<ion-list>
        <ion-radio ng-model="lang" ng-value="'en_US'" ng-click="updateLanguage('en_US')">English</ion-radio>
        <ion-radio ng-model="lang" ng-value="'es_MX'" ng-click="updateLanguage('es_MX')">Espanol</ion-radio>
        <ion-radio ng-model="lang" ng-value="'fr_CA'" ng-click="updateLanguage('fr_CA')">Francais</ion-radio>
</ion-list>

Вот часть моего приложения. js, который устанавливает значение $rootScope для языка: 

.run(function($rootScope) {
   $rootScope.language = 'en_US';
})

Наряду с этим, я использовал это в моих controllers.js: 

.controller('PreferencesCtrl', function($scope, $rootScope, $state, $ionicPlatform, $ionicLoading) {

  alert('PreferencesCtrl');

  $scope.lang = $rootScope.language;

  //Update Language
  $scope.updateLanguage = function(lang) {
    $scope.lang = lang;
    $rootScope.language = lang;
  };

});

Проблема, с которой я сталкиваюсьявляется то, что я могу успешно изменить язык один раз, но если я пытаюсь изменить его снова, вся страница становится белой, и ничего не отображается. Также представляется, что, установив $rootScope, он также изменяет отображаемый вид, так как кнопка возврата на текущем экране исчезает.

Я предполагаю, что я не устанавливаю $rootScope.languageв функции updateLanguage, так как информация не регистрируется на консоли при второй попытке изменить язык.

Если я изменю updateLangauge на этот: 

  //Update Language
  $scope.updateLanguage = function(lang) {
    $scope.language = lang;
  };

Тогда я неПри этом не возникает проблем с белым экраном, однако язык изменяется только для этого конкретного вида, а не для всего приложения.

Есть мысли о том, где я могу приблизиться к этому неправильно?

ОБНОВЛЕНИЕ : Похоже, что после повторной установки $ rootScope в функции updateLangauge мой PreferencesCtrl тогда не выполняется. Я добавил предупреждение к контроллеру, чтобы увидеть, срабатывает ли он после того, как $ rootScope был установлен во второй раз (когда экран становится белым), и предупреждение никогда не срабатывает. Итак, контроллер как будто ушел после обновления $ rootScope.

1 Ответ

0 голосов
/ 07 ноября 2019

Я думаю, что здесь происходит, вы не обновляете свою ng-модель. Всякий раз, когда вы щелкаете по языку, вы обновляете свою ng-модель, а также передаете язык методу для обновления $ rootScope.language. Измените свой метод, чтобы обновить оба: 

$scope.updateLanguage = function(lang) {
   $rootScope.language = lang;
   $scope.lang = lang;
};

Это должно обновить как UI ng-модель, так и значение корневого раздела, делая его доступным везде.

Единственная причина, по которой я могу думать, почему вашстраница становится белой, потому что у вас есть какая-то ошибка в консоли отладки. Проверь это. И у вас также есть опечатка в вашем App.js: там написано: $ rootScope.langauge (должен быть языком).

Кроме того, может быть также интересно просто сохранить список языков в вашем контроллере, а нежестко закодировать их в HTML. Таким образом, вы могли бы повторить это и использовать эти значения для обновления корневого диапазона.

...