manish manish - 2 months ago 9
AngularJS Question

$scope is not refreshing data inside template after $apply()

angular.module("mobApp.controllers")
.controller("ViewPostController",function($scope
, $stateParams, Utils, PublishMessageService, $state, $ionicActionSheet, $ionicModal, Constants, ShareObjectService) {

var postId = $stateParams.postId;
$scope.post = {};
$scope.BASE_URL = Constants.SERVER_URL;
$scope.$on('$ionicView.loaded', function() {
$scope.utils = Utils;
resetScopeVariables();
loadPost();
});

$scope.reload = function() {
loadPost();
}

$scope.vote = function(eventSource, voteType) {
Utils.vote(eventSource, voteType, postId, postId);
}

loadPost = function() {
resetScopeVariables();
if(Utils.hasInternet()) {
PublishMessageService.viewPublishMessage(postId).then(function(d){
if(d.data.post) {
$scope.showPost = true;
$scope.post = d.data.post;
$scope.showContentLoading = false;
ShareObjectService.setPostPhotoIds($scope.post.photosIds);
} else {
showInlineMessage(Utils.prepareErrorMessage("Nothing Was Found", "Sorry requested content is not available."));
}
}, function(err) {
showInlineMessage(Utils.prepareErrorMessage("Sorry!", err.description));
});
} else {
showInlineMessage(Utils.prepareErrorMessage("Can't Connect", Constants.MSG_NO_INTERNET));
$scope.showReloadBtn = true;
}
}

$scope.showPostMoreOptions = function(postId) {
$ionicActionSheet.show({
buttons: [
{ text: '<i class="icon ion-edit"></i> Edit' },
{ text: '<i class="icon ion-trash-a"></i> Delete' }
],
buttonClicked: function(index) {
if(index === 0) {
$state.go('app.publish-message-form', {'edit': true, 'postId': postId});
} else if(index === 1) {

}
return true;
},
destructiveButtonClicked: function() {
return true;
}
});
}

/*
Utils function
*/

function resetScopeVariables() {
$scope = {
pageInlineMsg: '',
contentLoadingMessage: 'Loading..',
showReloadBtn: false,
showContentLoading: true,
showPost: false
};
}

function showInlineMessage(msg) {
$scope.pageInlineMsg = msg;
$scope.showContentLoading = false;
}
});


Here is my router

$stateProvider
.state('app', {
url : '/app',
abstract : true,
templateUrl: 'templates/globalLeftMenu.html',
controller: 'GlobalLeftMenuController'
})
.state('app.view-post', {
url: '/view-post/:postId',
views: {
'app': {
templateUrl: 'templates/publish_message/view_post.html',
controller: 'ViewPostController'
}
}
})


Here I am getting data for
$scope.post
but it is not reflecting in template. If I use
$scope.$apply()
then I get error
$scope.$apply is not a function
. I don't know why suddenly I start getting this kind of problem. Earlier it was working fine.

Answer

Try it with $scope.$apply() and change

function resetScopeVariables() {
    $scope = {
        pageInlineMsg: '',
        contentLoadingMessage: 'Loading..',
        showReloadBtn: false,
        showContentLoading: true,
        showPost: false
    };    
}

to

function resetScopeVariables() {
    $scope.pageInlineMsg = '';
    $scope.contentLoadingMessage = 'Loading..';
    $scope.showReloadBtn = false;
    $scope.showContentLoading = true;
    $scope.showPost = false;  
}

as previously you set $scope to an entirely new object and therefore you can't call $scope.$apply anymore.