I want to implement a child state for getting data to the main state. While I'm in the child state I want to show $ionicLoading content over the view of the parent state and after the data is loaded it should leave the child state and go back to the parent state. How do I implement this using angularjs/ionicframework?
The controller for the state I want to split of is looking like this:
.controller('MainCtrl', function ($scope, $ionicPopover, $state, $ionicLoading, $ionicPlatform, $q, WebService, DBService) {
//------ THIS PART SHOULD GO INTO THE CHILD STATE -----//
$ionicLoading.show({
template: "Daten werden geladen...",
animation: "fade-in",
showBackdrop: false,
maxWidth: 200,
showDelay: 500
});
$ionicPlatform.ready(function() {
$ionicPopover.fromTemplateUrl('templates/popover.html', {
scope: $scope
}).then(function (popover) {
$scope.popover = popover;
});
DBService.dropTables();
DBService.createAllTables();
WebService.getAllTables().then(function(res) {
$ionicLoading.hide();
$scope.refreshDestinations();
//DATA is loaded leave the child state
}, function(err) {
$ionicLoading.hide();
//Change the state to login
$state.go('app.login');
});
});
//----------- UNTIL HERE -----------//
...
});
scope is inherited, so if you want to call a parent scope function from a child can. An example: with ionic loading, if it creates a isolated scope (which it may) you may have to call $parent.$ionicLoading.show().
<div class="show-scope-demo">
<div ng-controller="GreetController">
Hello {{name}}!
</div>
<div ng-controller="ListController">
<ol>
<li ng-repeat="name in names">{{name}} from {{department}}</li>
</ol>
</div>
</div>
angular.module('scopeExample', [])
.controller('GreetController', ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.name = 'World';
$rootScope.department = 'Angular';
}])
.controller('ListController', ['$scope', function($scope) {
$scope.names = ['Igor', 'Misko', 'Vojta'];
}]);