如何在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 后就好像控制器消失了。
<ion-content>
区域中。顶部标题栏和底部选项卡仍然存在。 - zeropsi