Develop Reference

bootstrap modal not close angular js

I am using UI bootstrap modal dialog box with angular js. Modal is successfully loaded. But when I click YES/NO Button, issued occurred & modal did not close.
Error said, ' $uibModal.close is not a function'.
.directive('confirm', function(ConfirmService) {
return {
restrict: 'A',
scope: {
eventHandler: '&ngClick'
},
link: function(scope, element, attrs){
element.unbind("click");
element.bind("click", function(e) {
ConfirmService.open(attrs.confirm, scope.eventHandler);
});
}
}
})
This is my service
.service('ConfirmService', function($uibModal) {
var service = {};
service.open = function (text, onOk) {
var modalInstance = $uibModal.open({
templateUrl: 'modules/confirmation-box/confirmation-box.html',
controller: 'userListCtrl',
resolve: {
text: function () {
return text;
}
}
});
modalInstance.result.then(function (selectedItem) {
onOk();
}, function () {
});
};
return service;
})
This is my controller file. I am trying to yes/no button inside the controller
.controller('userListCtrl',
['$scope','$http','appConfig','$uibModalInstance', '$uibModal','$log','alertService',
function ($scope,$http, appConfig,$uibModalInstance, $uibModal,$log,alertService) {
$scope.ok = function () {
$uibModalInstance.close();
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}]);

You're attempting to use two usage methods at once time. There are two (probably more) that you can use the $uibModal, but here are the two that I believe you're intermixing:
1) Service controls the modal and returns a promise, I believe this is what I think you're doing. You do not need to call close/dismiss manually in this instance. You can make the following changes:
service.open = function(text, onOK) {
var modalInstance = $uibModal.open({
templateUrl: 'modules/confirmation-box/confirmation-box.html',
controller: 'userListCtrl',
resolve: {
text: function () {
return text;
}
}
});
// Return so you can chain .then just in case. Generally we don't even
// do this, we just return the instance itself and allow the controller to
// decide how to handle results/rejections
return modalInstance.result;
}
In your template file you'd have something like:
<button type="button" ng-click="$close(selectedItem)"></button>
<button type="button" ng-click="$dismiss(readon)"></button>
2) If you want to use the close method directly, then you only need to change the service to:
...
return $uibModal.open({});
then in your controller:
var modal = service.open('confirm');
modal.result.then(...)
modal.close()
Edit - updated with change to op to remove the antipattern as per georgeawg suggestion.

How to close an Angular-ui-bootstrap uibModal on mouseleave using Factory?

I've recently switched all our modals directives in our app over to Angular-ui-Bootstrap modals. Much better, however running into a new style of modal which closes on mouseleave instead of a cancel click.
this.leaveTag = (tag) => {
TagHover.off();
};
this.hoverTag = (tag) => {
TagHover.display();
};
Above is the view logic that calls functions inside of our TagHover Factory.
Below is the Factory, the TagHover.display works fine like with our other modals, but what I'm trying to do with the leaveTag > TagHover.off is call the modal.close. Not working so far.
My question is how do you call the close functionality within the TagHoverController, or close on the $uibModal from my tagsPanel component -> TagsHover Factory? (Without using $scope or $rootScope events)
I'm not trying to call close/cancel from within the TagHover Ctrl scope, but trying to call close from a Parent scope.
const TagHover = angular.module('tickertags-shared')
.controller('TagHoverController', TagHoverController)
.factory('TagHover', factory);
TagHoverController.$inject = [
'TagHover'];
function TagHoverController(
TagHover) {
this.$onInit = () => {
console.log('TagHover onInit')
};
this.cancel = () => this.$close();
}
factory.$inject = ['$uibModal'];
function factory($uibModal) {
const display = () => {
const modal = $uibModal.open({
controllerAs: 'tghov',
bindToController:true,
templateUrl: 'tags/tag_hover.html',
windowClass: 'dash-modal',
resolve: {},
controller: 'TagHoverController'
});
};
const off = () => {
$uibModal.close({});
};
return {
display,
off
}
}
module.exports = TagHover;
Here are the docs https://angular-ui.github.io/bootstrap/#/modal
The open method returns a modal instance, an object with the following properties:
close(result) (Type: function) - Can be used to close a modal, passing a result.
I also logged out the $uibModal object and I only see an open function, no close :(

In your case, Your are using Factory for dynamic Modal. so you can use $uibModalStack in the below two ways.
$uibModalStack.dismissAll(); // dismiss all opened modal
$uibModalStack.dismiss(openedModal.key); // dismiss modal by key
Example of dismiss Method.
var top = $uibModalStack.getTop();
if (top) {
$uibModalStack.dismiss(top.key);
}
It's very important to do dismissing the modal during router changes since its dynamic modal.
In general, $uibModal will help to open the modal then each modal is $uibModalInstance, if you want to close modal inside the modal.
Opening Modal on Event
angular.module('myPage')
.controller('PageController', ['$uibModal',
function($uibModal) {
function onModalLink() {
$uibModal.open({
templateUrl: 'app/modals/paymentTpl.html',
controller: 'PaymentModalController as vm',
windowClass: 'generalModal myModal'
});
}
}
]);
To Close from Instance.
angular.module('paymentModal')
.controller('PaymentModalController', [
'$uibModalInstance',
function ChangeRepaymentController($uibModalInstance) {
function onCancel() {
$uibModalInstance.close(repaymentPercentage);
}
}
]);
modalInstance - The modal instance. This is the same $uibModalInstance injectable found when using controller.
WIKI Reference: https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs

This is wrong approach - you can not "just close modal", cause you dont tell which modal to close. I recommend you to redesign this...
You can have a look at $uibModalStack - it stores opened modals and have methods like dismisAll

I use close() method with $uibModal and open() method for manage in AngularJS $uiModal
Open method
vm.lanzarPopShowTask = lanzarPopShowTask;
function lanzarPopShowTask(index){
vm.modalInstance = $uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title-top',
ariaDescribedBy: 'modal-body-top',
templateUrl: '/btask/index/task.html',
size: 'm',
controller: function ($scope) {
vm.task = vm.tasks[index];
vm.index = index;
},
scope: $scope
});
}
And Close method
vm.modalInstance.close();

When doing this I set the modal as a scope variable then use $scope.sweetModal.close() or $scope.sweetModal.dismiss() you just have to remember that if you were to do the following it wouldn't work:
$scope.openModal = function () {
$scope.sweetModal = $uibModal.open({
templateUrl: '/modals/sweetModal.html',
size: 'md',
scope: $scope,
backdrop: true
})
.result.then($scope.modalCloseFunction, $scope.modalDismissFunction);
};
Where as the following would work because of how the variable is set:
$scope.openModal = function () {
$scope.sweetModal = $uibModal.open({
templateUrl: '/modals/sweetModal.html',
size: 'md',
scope: $scope,
backdrop: true
});
$scope.sweetModal.result.then($scope.modalCloseFunction, $scope.modalDismissFunction);
};

How to close an Angular Modal from the outside controller

I am using angular-modal-service to open a modal.
$scope.showLoader = function(message) {
ModalService.showModal({
templateUrl: "/templates/loader.html",
controller: "ctrl",
inputs: {
message: "loading"
}
}).then(function(modal) {
modal.close.then(function(result) {
if (result) {
// do something
}
});
});
}
After I open this modal, I want to call a function to close it from the main controller
$scope.closeLoader = function() {
// close the modal here
}
How can I do this?

You can assign the modal closing function to the $scope when the modal is completely loaded. I added a dummy function, that it won't execute undefined if the modal is closed, before it is ready. You can also skip that, if you can assure, that it won't be possible.
$scope.closeLoader = angular.noop;
$scope.showLoader = function(message) {
ModalService.showModal({
templateUrl: "/templates/loader.html",
controller: "ctrl",
inputs: {
message: "loading"
}
}).then(function(modal) {
$scope.closeLoader = modal.close;
});
};

Below is the code:
app.controller('MainController', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
html
<button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>

Get controller by path location in AngularJS

I'm developing a simple modal window with ui.bootstrap. This modal is showed when we click in a certain button binding to a controller and fires up, but the modal and its content is binding to another controller so when we click is necessary to know where the controller is which it'll be in another folder of the project.
For example, imaging the structure as follows:
component1
..... template1.html
..... controller1.js
component2
..... template2.html
..... controller2.js
The controller1.js is in charge of load the modal view which renders and is binding with template2.html and controller2.js respectively. So, in controller1.js we have this:
$scope.open = function (size) {
var modalInstance = $uibModal.open({
templateUrl: 'components/component2/template2.html',
controller: 'components/component2/controller2.js',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
$log.debug(selectedItem);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
Which obviously does not work for controller2.js. As we do we templateUrl, there is any way to load a controller passing its path as parameter in the $uibModal.open?

I have not tested it, but do something like:
var modalInstance = $uibModal.open({
templateUrl: 'components/component2/template2.html',
controller: 'ModalController',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
app.controller('ModalController', function ($scope, $modalInstance) {
// do some things
});

Angular-ui modal issue

I'm trying to include an angular-ui modal in my web application but am having issues with getting everything set up.
The documentation indicate that you can use $modalInstance to inject the child controller into the parent controller but I don't quite understand how to go about doing so.
Here is the current code (it is straight from the modal demo from the documentation):
angular.module('myApp.controllers', []).
controller('addContent', function ($scope, $http, $modal, $log){
//modaltest
$scope.items = ['item1', 'item2', 'item3'];
$scope.addTerm = function () {
var newTerm = $modal.open({
templateUrl: 'newTermModal.jade',
controller: newTerms,
resolve: {
items: function () {
return $scope.items;
}
}
});
newTerm.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}).
controller("newTerms",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');
};
});
When I run the app like it is now and click the button to open the modal (addTerm function) the app crashes with the error "ReferenceError: newTerms is not defined."
As I mentioned above, the angular-ui site indicates you can inject a controller with $modalInstance but I have not been able to figure out how.
a
Any help would be greatly appreciated!
EDIT
After adding the quotation marks on the pathname as suggested by Chandermani, it seems the modal is loading in the current page rather than the specified template.
I've changed the path to the following: templateUrl:
$scope.addTerm = function () {
var newTerm = $modal.open({
templateUrl: './views/partials/newTermModal.jade',
controller: 'newTerms',
resolve: {
items: function () {
return $scope.items;
}
}
});
A screenshot of the issue follows:
Any idea what could be causing this?

Well you can pass the controller as a string value. I took the default demo sample for modal and changed it to pass controller name instead of controller itself.
See my plunker http://plnkr.co/edit/jpJX4WvHw0SSYm3pAAzq?p=preview
So something like this
controller: 'newTerms',
should work.

I got the same problem, the modal loads main HTML file but not template.
My previous configuration was:
opens dialogs but dialog content is main HTML (like on your pic)
$scope.opts = {
backdrop: true,
backdropClick: true,
dialogFade: false,
keyboard: true,
templateUrl : 'app/reports/modalContent.html',
controller : 'ModalInstanceCtrl',
resolve: {}
};
works as expected
$scope.opts = {
backdrop: true,
backdropClick: true,
dialogFade: false,
keyboard: true,
templateUrl : '/app/reports/modalContent.html',
controller : 'ModalInstanceCtrl',
resolve: {}
};
Sounds like if you put wrong templateUrl, it by default uses main page HTML.
Be sure that you have right path for templateUrl
Hope it will help,

Have you tried to declare a dependency of 'ui.bootstrap' module? Like this:
angular.module('myApp.controllers', ['ui.bootstrap'])

Happened to me today, too. The templateUrl in the controller must match the id for the modal in the html file.

You need to define the newTerms controller before your other controller. Or you can change the code and just create a function inside your main controller with the name newTerms and remove the quotation marks for the name of your controller in your modal.
$scope.addTerm = function () {
var newTerm = $modal.open({
templateUrl: './views/partials/newTermModal.jade',
controller: newTerms,
resolve: {
items: function () {
return $scope.items;
}
}
});
var newTerms = 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');
};
}