更改语言-屏幕变白

Question

更改语言-屏幕变白

angularjsionic-v1

3

如何在AngularJS中正确使用复选框来更改$rootScope值

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

为此，我将$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>

这是我的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函数中没有设置$rootScope.language，因为在第二次尝试更改语言时，信息没有被记录到控制台。

如果我将updateLangauge更改为以下内容：

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

我没有遇到任何白屏问题，但是只有该视图的语言改变了，而不是整个应用程序。

您认为我在哪里出现了错误？

更新：看起来在 updateLangauge 函数中再次设置 $rootScope 后，我的 PreferencesCtrl 就不会被执行。我向控制器添加了一个警报，以查看它是否在 $rootScope 第二次设置之后（当屏幕变白时）被触发，但警报从未触发。所以，在更新 $rootScope 后就好像控制器消失了。

- zeropsi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Glenn van Acker · Answer 1

我认为这里发生的情况是，您没有更新您的ng-model。每当您点击一种语言时，您都会更新您的ng-model，并将该语言传递给一个方法来更新$rootScope.language。更改您的方法以同时更新两者：

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

这应该会更新UI ng-model和rootscope值，使其在任何地方都可用。

我能想到的唯一原因是您在调试控制台中有某种错误。请检查一下。而且您的App.js中也有一个拼写错误：它说$rootScope.langauge（应该是language）。

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