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();
};
};
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'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 have a controller tied to my view via routing.
Example in App.js I have the following:
when('/about', { templateUrl: 'views/about.html', controller: 'appAboutCtrl' }).
I have another controller for Modal specific actions. I need this since it is a login action that applies across pages, and for that reason, it is it's own controller versus repeating the login functionality in every controller.
My modal does what it is supposed to do, but when I close it, I need it to update the $scope on the page to show/hide an item by setting something akin to:
$scope.isLoggedIn = true;
However, the scope is not updating. I have seen something like this here: https://github.com/angular-ui/bootstrap/issues/2110#issuecomment-54551321 but given the complexity of my login, I need it to be in its own controller... separate of the controller driven my view.
Here is the call to my Modal and controller specific modal in the controller tied to the view I open it from (about.html and appAboutCtrl):
// Open Modal for Login
$scope.login = function () {
var modalInstance = $modal.open({
templateUrl: 'templates/login.html',
controller: 'appLoginCtrl',
size: 'lg'
});
}
Here is where I try to set the scope on modal close in appLoginCtrl:
$scope.ok = function () {
$modalInstance.close();
$scope.isLoggedIn = true;
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
$scope.isLoggedIn = true;
};
I can reload the view on modal close, but can't set the $scope as follows:
$scope.ok = function () {
$modalInstance.close();
$route.reload();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
$route.reload();
};
How can I set the $scope on Modal close so that when I close the modal, my view registers the change? My $scope is tied to a ng-show to show/hide an item on login.
You can use resolve option to bind variables.
var modalInstance = $modal.open({
templateUrl: 'templates/login.html',
controller: 'appLoginCtrl',
size: 'lg'
resolve: {
isLoggedIn: function () {
return $scope.isLoggedIn;
}
}
});
or you can pass the parent controller's scope to the modal scope
var modalInstance = $modal.open({
templateUrl: 'templates/login.html',
controller: 'appLoginCtrl',
size: 'lg',
scope: $scope
});
I am calling modal popup from my controller. It works fine for the first time but doesn't show the second time.
Here is the code for the show
$scope.showAdvanced = function (ev) {
var scopeVar = $scope;
console.log('$mdDialog');
console.log($mdDialog);
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
scope: $scope,
targetEvent: ev,
clickOutsideToClose: true
}).then(function (result) {
//$scope = $scope.$parent;
console.log($scope);
});
};
Here is my hide function inside DialogController.
$scope.hide = function () {
console.log('hide called');
$mdDialog.hide();
console.log('hide completed');
};
Hide is executing successfully and followed by callback defined in show which prints the current scope.
If I remove scope : $scope and put transclude : true then it is not showing the data in dialog controller though you can show and hide it more than once.
Add preserveScope: true to your modal options. A dialogue removes its scope on closing by default.
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.