Hello,
I am creating an App which uses services to make JSON requests on a server.
This app will be mostly online, so there won’t be a state that doesn’t require an internet connection (at least for now).
I am trying to get a modal when there is no internet connection, in which there is a “retry” button that should just execute a function in my scope.
So for the moment I have an interceptor on $httpProvider that broadcasts an event on “responseError”.
Then I have something like:
app.run(function($rootScope, $ionicModal) {
$rootScope.$on('loading:connectionError', function() {
$ionicModal.fromTemplateUrl(
'templates/no-connection.html', {
hardwareBackButtonClos: false,
backdropClickToClose: false
}
)
.then(function(modal) {
modal.scope.reload = function() {
modal.remove();
// TODO:
// load();
}
modal.show();
});
});
})
In my modal:
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Error</h1>
</ion-header-bar>
<ion-content>
<p>
No internet connection
</p>
<button class="button icon-left ion-refresh" ng-click="load()">
Try again
</button>
</div>
</ion-content>
</ion-view>
In my controller:
.controller('HomeCtrl', function($scope, Pages) {
$scope.load = function() {
Pages.get('home').success(function(page) {
$scope.page = page;
});
};
$scope.load();
})
I don’t want to add the code to every controller because each one will need it, but I can’t figure out how to call the “load” function from my modal, because it’s not in the same $scope.
Am I missing something trivial here?
Something must be bad with my structure, but I can’t figure out how to do this correctly.