I can capture the Back Button in an AngularJs app using the $locationChangeStart event, so I can close a modal.
This works when I navigate away from the first page and then click a modal, then click back, I capture the Back event and close the modal and prevent the browser back default.
The problem is it does not work when on the homepage, none of the events get fired so I can't prevent default and close the modal, it just goes back to the new tab page (google)
$rootScope.$on("$locationChangeStart", function (event, next, current) {
event.preventDefault();
console.log('$locationChangeStart 1 ');
});
$rootScope.$on('$routeChangeStart', function (scope, next, current) {
event.preventDefault();
console.log('$routeChangeStart');
});
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
event.preventDefault();
console.log('$stateChangeStart');
});
$rootScope.$on('$destroy', function (event, next, current) {
event.preventDefault();
console.log('$locationChangeStart');
});
I'm using $routeProvider and don't really want to have to re-write it in ui-router.
Is there some config I have missed to get these events to fire when on my first page? or is there a hack?
thanks
Related
I would like to ask how to stop loading application. I need this for showing modal window with login form. My idea is:
User go to my webpage, first start LoginController which check if user is authenticated. If not, it displays the form but must be stopped loading next controllers and components (loading data by user id).
Here is my concept:
<body ng-controller="LoginController">
controllers, components...
</body>
app.controller("LoginController", function LoginController(){
this.$onInit = function(){
if(!authenticated()){
showLoginModal();
stopLoadingApp(); // what will be implementation?
}
}
})
I tried this, but not called:
app.controller("LoginController", function LoginController($rootScope){
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
event.preventDefault(); //not called
});
});
Please help me how to solve this problem. Thanks
I am trying to do some functionality on $stateChangeSuccess.
$rootScope.$on('$stateChangeSuccess', function(event, toState) {
$rootScope.guestNav.push(toState);
});
And the above code should not work when I click browser back button that is on popstate event. Please help me to solve this issue. Or provide me a feasible solution.
Did you try to use new life cycle events? E.g.
.run(($transitions, $state, $injector) => {
'ngInject';
$transitions.onSuccess({ to: 'app.home' },
() => console.log('accessing to app home state'));
});
I am using the below code to prevent the state change in ui-router.
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
event.preventDefault();
});
but again if I move to any state it displays ionic back button enable.
As per my knowledge it is adding to the ionicHistory but couldn't find any solution.
Help with the solution please.
My app has one view, and a home page, when user opens the home page, I don't want the 'back' button appear. How can I do it?
there is no way to disable. one thing you can do which may accomplish the goal of not allowing the user to go backward is detect the transition backwards that you'd like to avoid and hack in a $state.go back to the fromState. this would have the effect of the back-button not doing anything. something like:
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
if (goingBackwardsAndShouldntBe(toState, fromState)) {
$state.go(fromState.name);
return;
}
I'm using angular-ui modal in my webapp. one of models display many links (anchor elements) that navigate to various parts of the app. the modal can be closed as usual with modal.dismiss() or modal.close(). but I need it to close when someone navigate out of it with clicking an anchor? usually (not angular) I could just attach an event to all the anchor clicks and close the modal from there. but in angular It seems somewhat complicated and not very "angularish" - Any ideas/directions on how to implement this?
e.g: I'm using angular-ui-router so if this can be solved through the routes It would also solve my problem.
Thanks!
Angular-ui-router fires events when a state change has occurred, so in your controller you could do something like:
$scope.currentModal = undefined;
// whenever a modal opens, ensure it is assigned to the $scope.currentModal. Not clear how
// you are managing your modals at the moment.
// this event-listener closes the current modal (if any)
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
if ($scope.currentModal) {
$scope.currentModal.dismiss();
}
})
Use $modalStack.dismissAll() to close any modalbox when state changes.
angular.module('myApp').controller('AppCtrl', ['$scope', '$rootScope', '$modal', '$modalStack',
function ($scope, $rootScope, $modal, $modalStack) {
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options){
$modalStack.dismissAll();
});
}
]);