I want to make my webapp go back to the state it was in when a user hits escape or clicks out of the popop. Right now it only works when a user clicks the okay button which triggers the $scope.close function.
.state('rates.rate.runexperiment', {
url: "/runexperiment",
onEnter: ['$stateParams', '$state', '$modal', function($stateParams, $state, $modal){
$modal.open({
templateUrl: "templates/ExpsResults.html",
controller: ['$scope', 'ExpsService', function($scope, ExpsService) {
$scope.expResults = null;
$scope.getExpResults = function(){
ExpsService.getExpResults('1000').get().then(function(response){
$scope.expResults = response;
});
};
$scope.close = function() {
$scope.$close(true);
$state.go('rates.rate');
};
$scope.getExpResults();
}]
})
}]
})
so right now the url before they click on the pop up is myendpoint/rates/rate. Then when they click on the pop it opens up and the url is myendpoint/rates/rate/runexperiment. Then when they escape or click out the popup, the window disappears like it should but the state is still myendpoint/rates/rate/runexperiment. It works when the user clicks the okay button and it goes back to myendpoint/rates.
I've tried the onExit feature in the .state but didn't get it to work. Any advice?
You could use the modal promise to capture the event when backdrop is clicked or when esc is pressed.
var modalInst = $modal.open({
templateUrl: "templates/ExpsResults.html",
controller: ['$scope', 'ExpsService', function($scope, ExpsService) {
$scope.expResults = null;
$scope.getExpResults = function(){
ExpsService.getExpResults('1000').get().then(function(response){
$scope.expResults = response;
});
};
$scope.close = function() {
$scope.$close(true);
$state.go('rates.rate');
};
$scope.getExpResults();
}]
})
modalInst.result.then(function () {
}, function () {//This will be triggered on dismiss/Esc/backdrop click
$state.go('rates.rate');
});
// Or just use finally to redirect whenevr modal is closed.
modalInst.result.finally(function () { // or .result[finally](
//Will be triggered always.
$state.go('rates.rate');
});
and remove state.go from close function.
Related
I have a little Angularjs application making use of $mdDialog to pop up a html page that has one text input on it
I want to be able to return the value the user types into the input back to the parent scope. I'm unsure how to do this.
This is what I have so far
$scope.showNewTeamDialog = function () {
$mdDialog.show({
controller: NewTeamDialogController,
templateUrl: 'NewTeam.html',
locals: { newTeamName: $scope.newTeamName },
parent: angular.element(document.body)
})
};
function NewTeamDialogController($scope, $mdDialog, newTeamName) {
$scope.closeDialog = function(newTeamName) {
// before closing I want to set $scope.newTeamName to whatever the user typed in the text on the dialog pop up
$mdDialog.hide();
}
}
The cleanest solution that I use is sending the data back when $destroy is fired. This is clean because it handles all cases for why the dialog is closing, ie when there's a click outside or the escape key is pressed or $mdDialog.hide() is called.
app.controller('CallerController', ['$scope', '$mdDialog',
function($scope, $mdDialog) {
$scope.some_event_listener = function(e) {
$mdDialog.show({
parent: angular.element(document.body),
controller: SomeDialogController,
templateUrl: 'some_dialog.html',
locals: {
on_complete: function(data_from_dialog_controller) {
console.log(data_from_dialog_controller);
}
}
});
};
}]);
app.controller('SomeDialogController', ['$scope', '$mdDialog', 'on_complete',
function($scope, $mdDialog, on_complete) {
$scope.$on('$destroy', function() {
on_complete($scope.some_input_model);
});
}]);
While this wouldn't be right before the dialog closed, I would probably do this using the .then part of the dialog.show promise. Here is a codepen with using one of the ngMaterial examples to modify a variable on close: https://codepen.io/mckenzielong/pen/veBrgE. Basically, something like this:
$scope.showNewTeamDialog = function () {
$mdDialog.show({
controller: NewTeamDialogController,
templateUrl: 'NewTeam.html',
locals: { newTeamName: $scope.newTeamName },
parent: angular.element(document.body)
})
.then((newTeamName) => {
$scope.newTeamName = newTeamName;
})
};
function NewTeamDialogController($scope, $mdDialog, newTeamName) {
$scope.closeDialog = function(newTeamName) {
$mdDialog.hide(newTeamName);
}
}
Alternatively you could do something a little more ugly, and share the scope like this: https://codepen.io/mckenzielong/pen/zEOaRe. One downside to this is your code will become confusing very quickly. Something like this:
$scope.showNewTeamDialog = function () {
$mdDialog.show({
controller: NewTeamDialogController,
templateUrl: 'NewTeam.html',
scope: $scope.newTeamName,
parent: angular.element(document.body)
})
.then(() => {
})
};
function NewTeamDialogController($scope, $mdDialog) {
$scope.closeDialog = function(newTeamName) {
$scope.newTeamName = newTeamName
$mdDialog.hide();
}
}
I want have a table showing a list of students. When a user clicks on a one of these students, a modal form pops up showing the details of the student (this works fine). I expose the selected student to the modal control using resolve like below:
function showStudentDetails(){
var modalInstance = $uibModal.open({
templateUrl: 'tpl/student/app_student.view.html',
controller: function($scope, $uibModalInstance, selectedStudent){
$scope.selectedStudent = selectedStudent;
$scope.userClickedCancel = function(){
$uibModalInstance.dismiss('cancel');
}
$scope.userClickedEdit = function(){
$uibModalInstance.close(selectedStudent);
modalInstance.result.then(function(selectedStudent){
showStudentEdit(selectedStudent);
})
}
},
resolve: {
selectedStudent: function() {
return $scope.selectedStudent;
}
}
});
}
Now, in this modal form there's an edit button which open a second modal.The second modal opens up fine and this is done by the
$scope.userClickedEdit = function(){
$uibModalInstance.close(selectedStudent);
modalInstance.result.then(function(selectedStudent){
showStudentEdit(selectedStudent);
})
}
in the first code snippet. The problem is the selectedStudent is not available in the context of my second modal form so the edit form input controls are blank. Below is my second modal form.
function showStudentEdit(selectedStudent){
var modalInstance = $uibModal.open({
templateUrl: 'tpl/student/app_student.edit.html',
controller: function($scope, $uibModalInstance, selectedStudent){
$scope.selectedStudent = selectedStudent;
$scope.userClickedCancel = function(){
$uibModalInstance.dismiss('cancel');
}
},
resolve: {
selectedStudent: function(){
return selectedStudent;
}
}
});
}
Thanks for taking time to check this and appreciate any help.
I'm new to angular, trying to use angular material to create a popup dialog. I'm confused with the promise and $scope here. If I click the dialog button, console will show 'created' and then no window will popup.
But if I change it to .then(createFolder, ..), function createFolder(){...}, everything is ok.
$scope.createFolder = function(ev) {
$mdDialog.show({
controller: dialogController,
templateUrl: 'dialog_new_folder.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true,
})
.then($scope.createFolder, $scope.cancelDialog);
};
$scope.createFolder = function() {
console.log('created')
}
$scope.cancelDialog = function() {
console.log('cancelled')
}
function dialogController($scope, $mdDialog) {
$scope.folderName = '';
$scope.hide = function() {
$mdDialog.hide();
}
$scope.cancel = function() {
$mdDialog.cancel();
}
}
You're using $scope.createFolder for both the function to call when the dialog is closed successfully, and for the function to show the dialog. Your second declaration is overwriting your first. Rename one of them.
I'm using $mdDialog in my application, but would like to use it as a "confirm" dialog instead of normal one. This means, the code flow should not proceed until user clicks on one of the two buttons in confirm dialog. I noticed that $mdDialog.confirm() can be used, but I'm not sure how to use it with custom templateUrl and a corresponding controller as the dialog's content.
Following is what I have written which works fine as far as dialog is concerned, but the code flow doesn't stop after the dialog is opened. It should stop until Ok or Cancel is clicked by the user.
$mdDialog.show({
controller: 'incomingCallDialogController',
templateUrl: 'app/components/others/incomingCallDialog/incomingCallDialog.tpl.html',
locals: {message: message},
parent: angular.element(document.body)
}).then(function (answer) {
console.log("here");
}
Basically it would be something like:
var confirm = $mdDialog.confirm({
controller: 'incomingCallDialogController',
templateUrl: 'app/components/others/incomingCallDialog/incomingCallDialog.tpl.html',
locals: {message: message},
parent: angular.element(document.body)
})
$mdDialog.show(confirm).then(function() {
console.log("here");
}
Here's a codepen.
Angular Js confirm dialog design using Matrial Ui and with icon/images
Screenshot : https://i.stack.imgur.com/rghwX.png
Online demo : https://codepen.io/MuhammadRizwan/pen/aYBKqW?editors=1010
try this
$scope.showTimContent = function (tim) {
$mdDialog.show({
controller: ['$scope', '$mdDialog', 'tim', $scope.ViewTimContentCtrl],
templateUrl: 'wgt/tim/TimContentDialog.html',
locals: {'tim': tim},
clickOutsideToClose: true,
});
};
$scope.ViewTimContentCtrl = function ($scope, $mdDialog, tim) {
$scope.tim = tim;
$scope.hide = function () {
$mdDialog.hide();
};
$scope.cancel = function () {
$mdDialog.cancel();
};
};
I have a angular modal window (for login). When user hits submit, i need to change the view to a home page (/myhome).
But doing $location.path = "/myhome" does not seem to be working from modal controller.
I open the Modal as follows:
$scope.openLoginModal = function () {
var modalInstance = $modal.open({
templateUrl: 'resources/html/login.html',
controller: 'loginController',
windowClass: 'app-modal-window'
});
};
And in my loginController, when user hits Submit i invoke doLogin function:
myApp.controller('loginController', function($scope, $modalInstance, $location, $http) {
....
$scope.dologin = function () {
...
$location.path="/myhome";
$modalInstance.dismiss('cancel');
....
}
Question
But the view never changes to /myhome.
Any ideas? Or alternative ways?
You're setting $location.path incorrectly. It's a setter function so the syntax is:
$location.path("/myhome");
Try that and see how it goes.