Refresh sidebar with new content updated from another controller.
I have a side menu that displays the user's profile picture and username. When the user refreshes this information from my settings page, it doesn't refresh the sidebar information.
Utility function
//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
//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>
Controllers: Side Menu Controller
//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];
});
}
});
})
Controller: Settings Controller
//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;
});
});
}])
Thank you in advance
+3
source to share
3 answers
In my factory
$rootScope.$broadcast('user:updated',userInfo);
In my application controller which is responsible for the menu content
$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];
});
+14
source to share
I found the following inside AppCtrl
is the best way to update user information.
// 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;
}
});
+2
source to share