改变语言-屏幕变白

Question

如何正确使用复选框更改AngularJS中的AngularJS值

我正在尝试为一个应用程序创建一个多语言部分，允许用户在应用程序加载时选择他们的首选语言。

在这样做时，我将$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>

下面是我的app.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，它还会随着后退按钮在当前屏幕上消失而改变正在呈现的视图。

我的猜测是，我没有在updateLanguage函数中设置updateLanguage，因为在第二次尝试更改语言时，没有将信息记录到控制台。

如果我将updateLangauge更改为：

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

然后，我没有遇到任何白色屏幕问题，然而，语言只是改变了特定的视图-而不是整个应用程序。

对我可能不对的地方有什么想法吗？

UPDATE：在$rootScope再次在updateLangauge函数中被设置之后，似乎没有执行my PreferencesCtrl。我向控制器添加了一个警报，以查看它是否在第二次设置$rootScope (当屏幕变白)之后启动，并且警报永远不会触发。所以，就像在更新$rootScope之后控制器就不见了一样。

Answer 1

我觉得你不是在更新你的模型。无论何时单击一种语言，都会更新ng模型，并将该语言传递给更新$rootScope.language的方法。更改您的方法以更新这两种方法：

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

这应该更新UI ng模型和根范围值，使其在任何地方都可用。

我认为页面变白的唯一原因是调试控制台中有某种错误。看看那个。而且您的App.js中还有一个错误:它说$rootScope.langauge (应该是语言)。

此外，在控制器中只保留一个语言列表也可能很有趣，而不是在html中对它们进行硬编码。因此，您可以对其进行迭代，并使用这些值来更新根范围。