обновить боковое меню с новым содержимым, обновленным с другого контроллера ionic
У меня есть боковое меню, которое показывает изображение профиля пользователя и имя пользователя. Когда пользователь обновляет эти сведения со страницы Мои настройки, он не обновляет информацию бокового меню.
Служебная Функция
//My service function
myApp.factory('User',function(Auth,dataService){
var userInfo = null;
return {
getUserInfo:function(){
if (userInfo == null){
var loggedIn = Auth.isLoggedIn();
var inputs = {auth_token:loggedIn.auth_token};
console.log("Input User "+JSON.stringify(inputs));
var promise = dataService.getUserInfo(inputs).then(function(response){
userInfo = response;
return response;
});
console.log("USERINFO IS "+ JSON.stringify(promise));
return promise;
}
return userInfo;
},
refreshUserInfo:function(){
var loggedIn = Auth.isLoggedIn();
var inputs = {auth_token:loggedIn.auth_token};
console.log("Input User "+JSON.stringify(inputs));
var promise = dataService.getUserInfo(inputs).then(function(response){
userInfo = response;
return response;
});
return promise;
}
};
});
Вид бокового меню
//Side menu View
<ion-side-menu side="left" id="leftSideMenu" class="menu_containor" style="visibility: hidden;" drag-content="false">
<ion-content>
<div>
<div class="about_top no_back">
<div class="menu_left_img">
<img src="{{userInfo.pic_url}}" width="110" height="110">
</div>
<!--<a href="#" class="red_icon"><img src="img/menu-redicon.png" width="32"></a>-->
<div class="menu_right_txt">
<h3>Hello,</h3>
<h1>{{userInfo.user_firstname}}</h1>
</div>
</div>
</div>
</ion-content>
</ion-side-menu>
Контроллеры: Контроллер Бокового Меню
//Side Menu Controller
appController.controller('AppCtrl', function($scope,$ionicPlatform, $ionicModal, $timeout,$state,User,definedVariable,$ionicSideMenuDelegate) {
$ionicPlatform.ready(function() {
//Get user information
if (User.getUserInfo().length > 0){
$scope.userInfo = User.getUserInfo()[0];
}else{
User.getUserInfo().then(function(response){
$scope.userInfo = response[0];
});
}
});
})
Контроллер: Контроллер Настроек
//Settings Controller
.controller('settingsCtrl',['$scope','$stateParams','$ionicPlatform','$timeout','$ionicSideMenuDelegate','$ionicModal','Auth' ,
'$location','$ionicActionSheet','countryList','User','definedVariable','dataService','adMobHelper',
function($scope, $stateParams,$ionicPlatform,$timeout,$ionicSideMenuDelegate,$ionicModal,Auth,$location,$ionicActionSheet,countryList,User,definedVariable,dataService,adMobHelper) {
$ionicPlatform.ready(function() {
window.scope = $scope;
$scope.userData = {};
var user = User.getUserInfo();
if (user.length >= 0){
$scope.userData = user[0];
}else{
user.then(function(result){
$scope.userData = result[0];
});
}
var modalOptions = {
updateUserAction:function(){
console.log(dataService.get_auth_token().auth_token);
var loggedIn = Auth.isLoggedIn();
$scope.updated.auth_token = loggedIn.auth_token;
if (Auth.getPicId() != null){
$scope.updated.pic_id = Auth.getPicId();
}
Auth.update_user($scope.updated).then(function(result){
if (result){
var promise = User.refreshUserInfo().then(function(response){
$scope.modal.hide();
});
//$scope.modal.hide();
}else{
alert("Something went wrong");
}
});
},
};
$scope.modalActions = modalOptions;
$ionicModal.fromTemplateUrl('templates/editProfile.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
});
}])
Заранее благодарю вас
3 ответа:
На моей фабрике
$rootScope.$broadcast('user:updated',userInfo);
В моем контроллере приложений, который отвечает за содержимое меню
$scope.$on('user:updated', function(event,data) { // you could inspect the data to see if what you care about changed, or just update your own scope $scope.userInfo = User.getUserInfo()[0]; });
Я обнаружил, что следующий внутри
AppCtrl
является лучшим способом обновить информацию о пользователе.// With the new view caching in Ionic, Controllers are only called // when they are recreated or on app start, instead of every page change. // To listen for when this page is active (for example, to refresh data), // listen for the $ionicView.enter event: $scope.$on('$ionicView.enter', function(e) { if(AuthService.isLoggedIn()){ $scope.loggedIn = true; //Maybe grab some user info and stuff it in a variable. } else { $scope.loggedIn = false; } });
Вы должны установить userInfo в вашем контроллере, как это:
$scope.userInfo = function() { return User.getUserInfo()[0]; }
И получите доступ к нему в вашем html следующим образом:
{{userInfo().pic_url}} ... {{userInfo().user_firstname}}
Таким образом, var будет обновляться, когда вы измените его на своей фабрике.