Current Situation
In my ionic side menu app, I have a main controller called 'main view'. Each tab in the app has its own controller, which is a child of the main controller. The issue I'm facing is that when I start the app, the first controller loads and displays data fetched from a Firebase DB in the 'main view'. However, the 'customer' tab does not get populated with the DB data until I click on it...
The Problem
The strange behavior occurs when I click on the 'customer' tab - no data from the DB is displayed initially. To load the data, I need to click on the side menu, at which point the data suddenly appears in the 'customer' tab. But before that, the view remains empty... Interestingly, occasionally, about one out of ten times, the page loads correctly!
Attempts Made
I attempted various methods to activate the 'customer' controller before clicking on its tab. For instance, I tried broadcasting a "start" signal from the main controller and listening for it in the 'customer' controller using a $scope.$on function, but this approach did not work.
Another attempt involved using the $scope.$on('$stateChangeSuccess', function() to handle state changes, which worked for the back button but not for loading the initial view upon app startup.
Even after modifying the $on function to use $scope.$on('$ionicView.enter', function(), the results were consistent.
The issue could potentially be related to the way data is loaded in the 'customer' tab via a Firebase call, suggesting a possible synchronous request problem.
Desired Outcome
My goal is to ensure that all controllers are loaded when the app starts, ideally addressing any potential synchronous request issues. Alternatively, I aim for the 'customer' tab to exhibit normal behavior when clicked, triggering the loading of data in its DOM element.
// Customer controller
function ($scope, $stateParams, $firebase, $firebaseArray, $state, $ionicPopup, $location)
{
$scope.getCustomer = function()
{
$scope.listCustomer = "";
$scope.newCustomer = [];
var user = firebase.auth().currentUser;
var refCustomer = firebase.database().ref("customers/"+user.uid+"/orders/");
$scope.orderTmp = $firebaseArray(refCustomer);
$scope.chatTmp.$loaded().then(function()
{
angular.forEach($scope.orderTmp, function(order)
{
var refOrderHist = firebase.database().ref("History/"+order.$id);
refOrderHist.once('value').then(function(snapshot)
{
if(snapshot.val() === null)
{
refOrderHist.child(order.$id).remove();
refCustomer.child(order.$id).remove();
}
else
{
$scope.newCustomer.push(snapshot.val());
}
});
});
});
$scope.listCustomer = $scope.newCustomer;
};
// Utilizing $on for handling back button functionality
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
if ($location.path() === "/side-menu/customer") {
$scope.getCustomer();
}
});
}