更改语言-屏幕变为白色 如何正确使用复选框更改AngularJS中的$rootScope值

我正在尝试创建一个应用程序的多语言部分，允许用户在加载应用程序时选择自己喜欢的语言

在这样做时，我将

$rootScope.language

设置为它们的首选语言

由于这种情况在加载应用程序时只发生一次，所以我想添加一个preferences部分，在这里他们可以根据需要更改自己的选择

在我的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>

.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

，它还可以随着当前屏幕上的“后退”按钮消失而更改正在渲染的视图

我的猜测是，我没有在updateLanguage函数中设置

$rootScope.language

，因为在第二次尝试更改语言时，没有将信息记录到控制台

如果我将updateLangauge更改为：

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

然后，我没有遇到任何白屏问题，但是，语言只是针对特定的视图而更改，而不是在整个应用程序中更改

你有没有想过我可能在哪里做得不对

---

更新：在UpdateLanguage函数中再次设置$rootScope后，似乎不会执行my PreferencesCtrl。我向控制器添加了一个警报，以查看它是否在第二次设置$rootScope（当屏幕变为白色时）后触发，并且警报从未触发。因此，在您更新$rootScope之后，控制器就消失了。

我认为这里发生的事情是，您没有更新ng模型。 无论何时单击语言，都会更新ng模型，并将该语言传递给更新$rootScope.language的方法。 更改您的方法以同时更新：

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

这将更新UI ng模型和rootscope值，使其在任何地方都可用

我能想到页面变白的唯一原因是调试控制台中出现了某种错误。检查一下。你的App.js中还有一个输入错误：上面写着$rootScope.langauge（应该是语言）

此外，在控制器中保留一个语言列表，而不是在html中硬编码，这可能也很有趣。

---

因此，您可以对其进行迭代，并使用这些值来更新rootscope。

感谢您指出错误。看起来这只是我的示例，而不是我的代码库。我在调试控制台中没有看到错误。我应该在白色屏幕上澄清，这只是应用程序的内容

区域。顶部的标题栏和下部的标签页仍然在原位。该内容的代码是什么？这是一个包还是一个自定义元素？在我看来，这里的代码有问题，而不是你展示的代码。