I currently have a $mdDialog that when opened is full page and has a form within it. When the user clicks cancel the $mdDialog is closed by calling this function
$mdDialog.cancel();
However, I want to also close the $mdDialog when a user clicks the browsers back button, this is what I am looking to do
backButtonWasClicked = function() }
$mdDialog.cancel();
}
How can this be done? I've thought about putting a hash in the URL when the $mdDialog shows like mywebsite.com/page#dialog and then somehow when the user clicks the back button it can see this hash and close the dialog and remove the hash. I am not sure if that is the best way.
Is there any way this can be done?
I found a solution to this for anyone who may want the same functionality.
This is the code that creates my $mdDialog
$scope.showOrderFormOverlay = function (ev) {
$mdDialog.show({
templateUrl: '/Partials/dialog.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: false,
escapeToClose: false,
fullscreen: true,
focusOnOpen: false,
onComplete: function () {
$('.md-dialog-container').addClass('fullscreen');
$location.hash("this-can-be-whatever");
}
});
};
I injected $location into the controller that creates my $mdDialog. Then, I added this line $location.hash("this-can-be-whatever") into the onComplete function. This adds a hash to the current url mywebsite.com/page, so after you open the $mdDialog it will look like this mywebsite.com/page#this-can-be-whatever.
Then inside of my $mdDialog's controller I added this function,
window.onpopstate = function () {
if (window.location.hash == "") {
$mdDialog.cancel(); // Cancel the active dialog
}
}
This will remove the hash from the url and close the $mdDialog.
Related
I have a scenario where on click of the button I am triggering a modal with some information and social networking buttons in the modal footer.
When click on the social networking button i want the url which is sent should show a modal directly instead of showing the page
Route:
.state('main', {
url: '/main',
templateUrl: 'views/mainView.html',
controller: 'mainCtrl'
})
Controller:This is where i am opening a modal on button click
$scope.fnModal = function() {
var modalInstance = $uibModal.open({
animation: ISOURCE_TOGGLE.set,
backdrop: 'static',
templateUrl: 'views/modal/rescheduleModalView.html',
controller: 'ModalCtrl'
})
}
Modal ctrl: This is where the modal should be share on click of social share button using Socialshare service
$scope.socialShare = function() {
Socialshare.share({
'provider': 'facebook',
'attrs': {
'socialshareUrl': window.location.href
}
});
}
but here the main page is getting shared where as i want the modal should be shared directly
Any help would be appreciated.
Create a directive for modal.
Inject the directive in your controller and use it in html as follows.
<modal data-some-attr="value"></modal>
If your modal content is static, you can just add a query parameter in your URL when you open your modal (function $scope.fnModal) with this :
$state.transitionTo('main', {modal: 'true'}, { notify: false });
You don't change anything in your modal controller.
When an user comes to your page main, you have to check if in your url you have the query parameter modal sets to true. If yes, you open the modal or else just show the page without modal.
i have a code in routing like this
.state('resetPassword', {
url: '/home/reset_password',
templateUrl: 'home/home.html',
controller: 'HomeController',
controllerAs: 'vm',
data: {
requireLogin: false /* This is what tells it to require authentication */
},
onEnter: function($state, $uibModal) {
var mymodal=$uibModal.open({
backdrop: true,
templateUrl: 'login/resetpassword.html',
}).result.finally(function() {
$state.go('home');
})
}
})
and close button markup
<div class="reset_section" ng-style="reset">
<span class="modal_close" ng-click="modalClose()">
<i class="material-icons">close</i>
this will open the modal on page loads, but the issue is, i can't able to close the modal by calling the function modalClose(), it is showing $uibModalInstance is not defined and also i need to open one more modal in the same page. after resetting the password, there is one button to login, after clicking the login button.it need to open login popup and have to close the reset password popup.How to do it, can anyone please help me
You could use $uibModalStack.dismissAll(); to dismiss all the existing modals.
In your case, You just need to add $uibModalInstance in the controller and try running it again. use $uibModalInstance.close() function.
I am working on a timeout system for my angularjs app. On timeout I will be presenting the user with a timeout modal. The problem that I am having is with other modals that are already open, the timeout modal appears on top of the existing modal. I am looking for some suggestions on how I can close all the existing modals before opening the timeout modal. I am using the $modal service.
timeoutModal = $modal({
templateUrl: 'components/common/timeout.html',
controller: 'TimeoutController as time',
backdrop: 'static',
prefixEvent: 'timeoutMessage',
show: false
});
You can use
$modalStack.dismissAll();
usage
.controller("MyCtrl", function($scope, $modalStack){
// ...
$scope.closeAll = function(){
$modalStack.dismissAll();
};
)
I am trying to add multiple tabs in my angularjs application.
On click of any menu item, I open the view in a new tab.
User have a optin to close any existing tab and he can click the menu option again to opne the view again as a tab.
Till now all this is working fine, but the issue is when the tab is closed I am not able to clear the previous sticky state. When user clicks on the same menu the new view is loading with the previous state.
On the close tab action I am trying to clear the state as following.
$stickyState.stateInactivated($state.$current)
$stickyState.reset('tabs.survey')
My routing for the tab is as following.
$stateProvider.state('tabs.survey', {
url: '/survey',
sticky: true,
views: {
'survey': {
templateUrl: 'partials/survey.html',
controller : 'surveyController'
}
}
});
I applied a workaround/hack to fix this issue
I added a new parameter to the route as following.
$stateProvider.state('tabs.survey', {
url: '/survey/:ts',
sticky: true,
views: {
'survey': {
templateUrl: 'partials/survey.html',
controller: 'surveyController'
}
}
});
Added the module run configruation like following.
app.run(function ($state, $rootScope, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
})
Finally on creating of a new tab item, I tried to changed the parameter to refresh the old state as following.
$state.go('tabs.survey', { "ts": 1 });
$state.go('tabs.survey', { "ts": 0 });
This is just a workaround. There can be some better solution for this, which I am not sure at this point of time.
All suggestions are welcome.
Trying to set up a (I think) relatively simple modal to show the sites cookie policy.
The policy is on /cookiepolicy. Checked and that link works nicely.
I then created a button (that does call the code)
<a class="btn btn-default" href ng-click="showCookie()">Read More</a>
As I just want to call the modal for the url, nothing more is added to the html.
The function that calls the modal (which also is called and reports success as per the last line.)
app.controller('IndexController', function($scope, ModalService) {
$scope.showCookie = function (data) {
ModalService.showModal({
templateUrl: "/cookie-policy",
controller: "ModalController"
}).then(function (modal) {
//it's a bootstrap element, use 'modal' to show it
modal.element.modal;
modal.close.then(function (result) {
console.log(result);
});
});
}
});
The modal also have its own controller
betchaHttp.controller('ModalController', function($scope, close) {
// when you need to close the modal, call close
close("Success!");
});
The thing is that when I press it, nothing comes up on the page, neither is there a error message. Am I missing something rather obvious (or not so obvious)
Fortunately, this is just a small syntax typo on your end. Observe your .then() block and change...
modal.element.modal; // -- nothing
to
modal.element.modal(); // -- fn call
JSFiddle Link - demo