How do I detect when an Angular UI Bootstrap modal dialog is closed?
I need to know when the dialog closes so I can broadcast a loginCancelled event using the angular-http-auth library to prevent my Angular UI from hanging, especially after closing the modal via clicking on the backdrop.
This works for clicking on the backdrop and pressing the esc key if you are opting in on that.
var modalInstance = $modal.open({
templateUrl: '/app/yourtemplate.html',
controller: ModalInstanceCtrl,
windowClass: 'modal',
keyboard: true,
resolve: {
yourResulst: function () {
return 'foo';
}
}
});
var ModalInstanceCtrl = function ($scope, $modalInstance, yourResulst) {
var constructor = function () {
// init stuff
}
constructor();
$modalInstance.result.then(function () {
// not called... at least for me
}, function () {
// hit's here... clean up or do whatever
});
// VVVV other $scope functions and so on...
};
UPDATE: alternative approach
I have no idea why this way is not documented at http://angular-ui.github.io/bootstrap/ ... but I find it much better. You can now use that page's controller or use a specific controller with the controller as syntax. You could even utilize ng-include for the content of the modal, if you want separation on html. The following works with no JS needed in the controller to setup/configure the modal, as long as you have bootstrap/bootstrapUI included in your project/site
<div class="row">
<button class="btn btn-default" data-toggle="modal" data-target="#exampleModal">Open Example Modal</button>
</div>
<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">Close</button>
<h2 class="modal-title" id="exampleModalLabel">Modal Example</h2>
</div>
<div class="modal-body" style="padding-bottom:0px;">
<h3>model markup goes here</h3>
</div>
</div>
</div>
</div>
I finished with the following code:
$modal.open(modalOptions).result.finally(function(){
console.log('modal has closed');
});
This way you can avoid the method then()
This worked for me:
var modalInstance = $modal.open({...});
modalInstance.result.then(function () {
//something to do on close
});
Related
I want to implement UI Modal in AngularJS without using $Scope and without implementing the ModalController(resolve).
I am not using $scope in my Controller. I am using vm = this. So I dont know what value to assign to scope while openinig the Modal.
I also dont want to use resolve, as it involves creating one more Controller.
Please find my code below: Any help will be greatly appreciated.
HTML
<script type="text/ng-template" id="modaltemplate.html">
<div class="modal-header">
<h3>Modal Header</h3>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="vm.close()" data-dismiss="modal">Close
</button>
</div>
</script>
CONTROLLER Look at scope in $uibModal.open() function.
angular
.module("app", ["ui.bootstrap"])
.controller("MyController", MyController)
MyController.$inject = ["$uibModal"];
function MyController($uibModal) {
var vm = this;
vm.open = open;
vm.close = close;
function open() {
vm.modalInstance = $uibModal.open({
templateUrl: 'modaltemplate.html',
scope: //what should I assign here, I dont want to use $scope. Or in other words, I want to assign 'vm' here.
});
}
function close() {
//This function is not getting called as it does not understand the vm.
}
}
I have tried the following things:
In the HTML, set ng-controller="MyController as vm".
Also tried setting various Values for scope, controller, and controllerAs in the $uibModal.open() function.
But nothing seems to working. Can anybody please help me out.
if you have problem with Close function, you can set $dismiss() for close modal instance, also you can pass parameter in $dismiss function for further use, try this:
<script type="text/ng-template" id="modaltemplate.html">
<div class="modal-header">
<h3>Modal Header</h3>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$dismiss('cancel')" data-dismiss="modal">Close
</button>
</div>
</script>
You can create a new scope in main controller
var modalScope = $scope.$new();
assign what you need on new scope (or whole vm):
modalScope.vm = vm;
and then assign it as modal scope:
vm.modalInstance = $uibModal.open({
templateUrl: 'modaltemplate.html',
scope: modalScope
});
Just make sure you clear it when closing/destroying modal
modalScope.vm = null;
So have a modal with a two buttons on it. One to close the modal, and one that should fire a function when clicked. I've attached a controller to the modal, and the controller itself works, as it does a successful console.log(). The ng-click doesn't seem to fire the function though. I think I just need another set of eyes on this, and it is greatly appreciated.
HTML:
<div id="forwardCall" class="modal fade" ng-controller="CallCtrl as call">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Transfer Call</h4>
</div>
<!-- dialog body -->
<div class="modal-body">
<p>Select Person below</p>
<div id="transferSelection">
<?php echo $transferCallSelect; ?>
</div>
</div>
<!-- dialog buttons -->
<div class="modal-footer">
<button class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="call.hideControls()">Transfer Call</button></div>
</div>
</div>
</div>
Controller:
app.controller('CallCtrl', ['$scope', '$http', function($scope, $http){
console.log("Call Controller");
function hideControls(){
console.log("Controls Hidden");
var well = document.getElementById('callControls');
well.style.display = 'none';
}
}]);
If you are using controller as syntax, you are binding to this variable instead of $scope. Here is a good post talked about Controller As Syntax.
tymejv gave you a good suggestion. You have to binding the function to this when you are using controller as syntax. So that you can access the function or variable for this particular controller.
this.hideControls = function() { ... };
You can binding to function to the $scope as well:
$scope.hideControls = function() { ... };
controller.js
(function () {
'use strict';
angular
.module('app')
.controller('CallCtrl', CallCtrl);
CallCtrl.$inject = ['$scope', '$http'];
function CallCtrl($scope, $http) {
var vm = this;
console.log("Call Controller");
vm.well = true;
vm.hideControls = function () {
console.log("Controls Hidden");
//Do not to this! This is not jQuery
//var well = document.getElementById('callControls');
//well.style.display = 'none';
vm.well = false;
};
}
}());
index.html
<div id="forwardCall" class="modal fade" ng-controller="CallCtrl as call">
<div ng-show={{ call.well }}>Some content</div>
</div>
I'm using AngularUI to integrate Bootstrap components in my Angular 1.4 app, such as Modals.
I'm calling a Modal in my controller like so:
var modalInstance = $modal.open({
animation: true,
templateUrl: '/static/templates/support-report-modal.html',
controller: 'ModalInstanceCtrl'
});
Unfortunately, when I want to close the Modal by using:
modalInstance.close();
The modal itself dissapears, and the backdrop also fades out, but it isn't removed from the DOM, so it overlays the whole page leaving the page unresponsive.
When I inspect, I'm seeing this:
In the example in the Documentation on https://angular-ui.github.io/bootstrap/#/modal The class modal-open is removed from body and the whole modal-backdropis removed from the DOM on close.
Why is the Modal fading out but the backdrop not removed from the DOM in my example?
I've checked out many of the other questions about the backdrop of bootstrap Modals but I can't seem to figure out what's going wrong.
This is apparently due to a bug. AngularUI doesn't support Angular 1.4 yet. Once http://github.com/angular-ui/bootstrap/issues/3620 is resolved this will work.
Until the team gets this sorted here is a work around.
<div class="modal-footer">
<button class="btn btn-primary"
ng-click="registerModal.ok()"
remove-modal>OK</button>
<button class="btn btn-warning"
ng-click="registerModal.cancel()"
remove-modal>Cancel</button>
</div>
/*global angular */
(function () {
'use strict';
angular.module('CorvetteClub.removemodal.directive', [])
.directive('removeModal', ['$document', function ($document) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function () {
$document[0].body.classList.remove('modal-open');
angular.element($document[0].getElementsByClassName('modal-backdrop')).remove();
angular.element($document[0].getElementsByClassName('modal')).remove();
});
}
};
}]);
}());
Unfortunately it appears that the team is not on the same page concerning this issue as it was pushed to a separate thread by a contributor and then the thread it was pushed to was closed by another as it was considered "off topic" by another.
Simply you can do like this, first close the modal u have opened
$('#nameOfModal').modal('hide');
basically id of modal Second this to remove if any
$('body').removeClass('modal-open');
lastly to close backdrop
$('.modal-backdrop').remove();
<button type="button" class="close" onclick="$('.modal-backdrop').remove();"
data-dismiss="modal">
$(document).keypress(function(e) {
if (e.keyCode == 27) {
$('.modal-backdrop').remove();
}
});
I am using Angular version 1.3.13 and have a similar issue. I been researching the problem and believe this bug extends from angular version 1.3.13 to 1.4.1 details here https://github.com/angular-ui/bootstrap/pull/3400
And if you scroll to the bottom of that link you will see a post by fernandojunior showing the versions he tested and upgraded to still showing the same issue. He even created a plnker to simulate the issue http://plnkr.co/edit/xQOL58HDXTuvSDsHRbra and I've simulated the issue in the code snippet below using the Angular-UI modal code example.
// angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular
.module('ui.bootstrap.demo', [
'ngAnimate',
'ui.bootstrap',
]);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<!-- angular 1.4.1 -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<!-- angular animate 1.4.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-animate.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
In you submit button or which ever button/selection that moves you to another page, just have data-dismiss="modal" and that should take care of the back drop. It is just telling to dismiss the modal when you have made your selection.
I am also using Angular 1.3.0 and I am also using UI bootstrap-tpls-0.11.2 and for some reason my issue was happening when I was redirecting to the new page and the backdrop was still displaying, so I ended up adding this code...
.then(function () {
$("#delete").on('hidden.bs.modal', function () {
$scope.$apply();
})
});
which I actually found here....
Hide Bootstrap 3 Modal & AngularJS redirect ($location.path)
Its loading opening modal and also loading template specified. But not showing anything.
Check out the demo here : http://demo.hupp.in/food-admin
Go to [Products] and Search EnegiKcal >= 3500. Then click on manage. It will open pop up but template content is not loaded.
Also one other thing I noticed is that it returns HTTP 304 for template sometimes.
This is how I open modal :
/** Open Modal For add edit tags */
$scope.open = function (productId) {
var modalInstance = $modal.open({
templateUrl: 'views/some.html',
controller: tagsModalInstanceCtrl,
size: 'lg'
});
modalInstance.result.then(function (msg) {
}, function () {
// $log.info('Modal dismissed at: ' + new Date());
});
};
var tagsModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close("hi");
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
Here is template code :
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<h3>Well, Hello there!</h3>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
Ok, it is pretty strange but it seems that your template is based on the master branch of https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html
and your sources on the tag 0.11.
https://github.com/angular-ui/bootstrap/blob/0.11.0/src/modal/modal.js
It is visible when you type $('.modal-content') in the console, you will see that it needs a modal-transclude directive, but in the sources there is no trace of this directive. Because, on 0.11 it directly uses the ng-transclude directive which is part of angular.
So, your code is correct, but the lib is not, try retrieving a correct version of it (maybe the last build of their repo is broken)
As a matter of fact, I did have a similar problem when switching to angularjs v1.2. The formerly working dialog didn't show, just like yours. Had to change the structure to look something like this to make it visible again:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-lg-9">
<h3>{{header}}</h3>
</div>
</div>
</div>
<div class="modal-body">
<form name = "kontoForm" szp-focus="sifra">
<!-- Šifra -->
<szp-input id="sifra" text="Šifra" place-holder="šifra" value="konto.sifra" required="!konto.sifra"></szp-input>
<!-- Naziv -->
<szp-input id="naziv" text="Naziv" place-holder="naziv" value="konto.naziv" required="!konto.naziv"></szp-input>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-hide="!kontoForm.$valid || (mode == 'edit')" ng-click="okContinue()">OK i nastavi</button>
<button class="btn btn-primary" ng-hide="!kontoForm.$valid" ng-click="ok()">OK i zatvori</button>
<button class="btn btn-warning" ng-click="cancel()">Odustani</button>
</div>
</div>
</div>
I had to wrap everythin in a div with a modal-content class to make it work.
include .map files for jquery and angular in your /js folder .may be that will help
I have experienced this off and on for some reason as well.
I solved it by adding a CSS statement, after doing an inspection via Chrome's tools I found that for some reason the modal display was still set to hidden.
.modal {
display: block;
}
Take a look this link.
vm_main.showModal = {
mostrarErrores : false,
showModal : function(jsonError) {
var options={
tituloModal: jsonError.titleModal,
textoPrincipal: jsonError.mainMessage,
textoBtnAceptar: "Aceptar",
accionBtnAceptar: "vm_popup.cerrarPopup()",
};
commonPopUpService.getDisclaimerGeneric($scope, 'commonPopUpController', options);
}
};
http://plnkr.co/edit/EYDEG5WSmNwxQflsB21T?p=preview
I think will help you on how load a simple dinamic html as a modal.
Regards
Using the example mentioned here, how can I invoke the modal window using JavaScript instead of clicking a button?
I am new to AngularJS and tried searching the documentation here and here without luck.
Thanks
OK, so first of all the http://angular-ui.github.io/bootstrap/ has a <modal> directive and the $dialog service and both of those can be used to open modal windows.
The difference is that with the <modal> directive content of a modal is embedded in a hosting template (one that triggers modal window opening). The $dialog service is far more flexible and allow you to load modal's content from a separate file as well as trigger modal windows from any place in AngularJS code (this being a controller, a service or another directive).
Not sure what you mean exactly by "using JavaScript code" but assuming that you mean any place in AngularJS code the $dialog service is probably a way to go.
It is very easy to use and in its simplest form you could just write:
$dialog.dialog({}).open('modalContent.html');
To illustrate that it can be really triggered by any JavaScript code here is a version that triggers modal with a timer, 3 seconds after a controller was instantiated:
function DialogDemoCtrl($scope, $timeout, $dialog){
$timeout(function(){
$dialog.dialog({}).open('modalContent.html');
}, 3000);
}
This can be seen in action in this plunk: http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview
Finally, here is the full reference documentation to the $dialog service described here:
https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md
To make angular ui $modal work with bootstrap 3 you need to overwrite the styles
.modal {
display: block;
}
.modal-body:before,
.modal-body:after {
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after {
display: table;
content: " ";
}
(The last ones are necessary if you use custom directives) and encapsulate the html with
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Open modal windows with passing data to dialog
In case if someone interests to pass data to dialog:
app.controller('ModalCtrl', function($scope, $modal) {
$scope.name = 'theNameHasBeenPassed';
$scope.showModal = function() {
$scope.opts = {
backdrop: true,
backdropClick: true,
dialogFade: false,
keyboard: true,
templateUrl : 'modalContent.html',
controller : ModalInstanceCtrl,
resolve: {} // empty storage
};
$scope.opts.resolve.item = function() {
return angular.copy(
{name: $scope.name}
); // pass name to resolve storage
}
var modalInstance = $modal.open($scope.opts);
modalInstance.result.then(function(){
//on ok button press
},function(){
//on cancel button press
console.log("Modal Closed");
});
};
})
var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {
$scope.item = item;
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
Demo Plunker
The AngularJS Bootstrap website hasn't been updated with the latest documentation. About 3 months ago pkozlowski-opensource authored a change to separate out $modal from $dialog commit is below:
https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd
In that commit he added new documentation for $modal, which can be found below:
https://github.com/angular-ui/bootstrap/blob/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal/docs/readme.md.
Hope this helps!
Quick and Dirty Way!
It's not a good way, but for me it seems the most simplest.
Add an anchor tag which contains the modal data-target and data-toggle, have an id associated with it. (Can be added mostly anywhere in the html view)
Now,
Inside the angular controller, from where you want to trigger the modal just use
angular.element('#myModalShower').trigger('click');
This will mimic a click to the button based on the angular code and the modal will appear.
Different version similar to the one offered by Maxim Shoustin
I liked the answer but the part that bothered me was the use of <script id="..."> as a container for the modal's template.
I wanted to place the modal's template in a hidden <div> and bind the inner html with a scope variable called modal_html_template
mainly because i think it more correct (and more comfortable to process in WebStorm/PyCharm) to place the template's html inside a <div> instead of <script id="...">
this variable will be used when calling $modal({... 'template': $scope.modal_html_template, ...})
in order to bind the inner html, i created inner-html-bind which is a simple directive
check out the example plunker
<div ng-controller="ModalDemoCtrl">
<div inner-html-bind inner-html="modal_html_template" class="hidden">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
inner-html-bind directive:
app.directive('innerHtmlBind', function() {
return {
restrict: 'A',
scope: {
inner_html: '=innerHtml'
},
link: function(scope, element, attrs) {
scope.inner_html = element.html();
}
}
});