I'm using Angular UI Bootstrap. If a modal is open, I'd like to display true. If it's not open, I'd like to display false. Is there a way to do this within the HTML?
I tried using the following code, but it's wrong:
<code>myForm.$modalStack.opened={{myForm.$modalStack.opened}}</code>
Any thoughts on how to do this correctly?
Below the relevant code I'm using to trigger the modal:
HTML:
<button ng-click="myForm.agreement()">
Code in Controller:
.controller('MyFormCtrl',
function ($location, $stateParams, $modal, $scope, $http) {
var myForm = this;
// . . .
myForm.agreement = agreement;
function agreement() {
$modal.open({
templateUrl: 'views/agreement.html'
})
});
The opened property returned by $modal.open is a promise you can hook into.
So, using their example, see here - http://plnkr.co/edit/PsEqTIy8CDUU88HMLxbC?p=preview
$scope.modalOpen = false;
$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.opened.then(function () {
$scope.modalOpen = true;
});
// we want to update state whether the modal closed or was dismissed,
// so use finally to handle both resolved and rejected promises.
modalInstance.result.finally(function (selectedItem) {
$scope.modalOpen = false;
});
};
You want to call the promises and then do whatever you need. .opened is a promise for when the modal opens, and .result is a promise for when the modal closes. So using this idea, you would use $scope.modalOpen as your boolean.
Related
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'm using a solution found here: How to close Angular UI Modal from anywhere
to close a UI bootstrap modal that I'm using as an HTTP interceptor to show loading.
However, this solution closes ALL open modals since $modalStack.dismissAll() is being used. How do I remove only the modal that's open with the loading. Here's my code:
app.factory('loadingModal', ['$modal', '$modalStack', function($modal, $modalStack) {
return {
trigger: function(template) {
$modal.open({
windowClass: 'modal fade loading-modal',
templateUrl: '/assets/partials/modals/loadingModal.html',
backdrop: 'static',
controller: function($scope, $modalInstance) {
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
});
},
close: function(reason) {
$modalStack.dismissAll(reason);
// $modal.close();
}
};
}])
Not totally clear how you are using this in interceptor but you should be able to return the instance from trigger and then use instance.dismiss()
app.factory('loadingModal'.....
return {
trigger: function(template) {
// return this instance
return $modal.open({.....
......
}
Then store instance wherever you intialize trigger() in interceptor
var modal = loadingModal.trigger('tmpl.html');
Then to close
modal.dismiss();
Of course you could store this instance in service and create a method to close it with a service method also
Im trying to make an angularjs Modal service.
I have an controller that opens some modal, in that modal i call original controller functions or access some variables, this part i can make it already.
I just cant close modal without clicking cancel or ok buttons, o want to make some operations in the modal, call some werbservices and the close modal manually.
Can anyone help me?
I made an working plunker here:
plunker
var modalInstance = $modal.open({
templateUrl: 'myModalContent2.html',
controller: ModalInstanceCtrl,
size: size,
scope: $scope
});
To close a $modal that you have opened you can follow these steps.
1) Inject $modalInstance into the controller that you specified when you created the modal. In your case you called it ModalInstanceCtrl.
2) Have a function in your ModalInstanceCtrl that calls .close() on $modalInstance.
your ModalInstanceCtrl should look something like this
angular.module('myCoolApp')
.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.closeModal = function(){
$modalInstance.close();
}
});
$scope.myData='all data can be';
$scope.myModalInstance = $modal.open({
templateUrl: 'app/myOpen.html',
controller: 'myOpenController',
size: 'lg', //modal open size large
backdrop: 'static',
keyboard: false,
resolve: {
myData: function () {
return $scope.myData;
}
}
});
$scope.modalClose = function (){
$scope.myModalInstance.close();
}
I am trying to use Angular UI Bootstrap Modal. And I want to have the changes to the model to be shown immediately.
This is the controller:
$scope.testInputField = "";
$scope.showModal= function () {
var modalInstance = $modal.open({
templateUrl: 'partials/modal.html',
controller: 'ModalController',
resolve: {
inputTest: function () {
return $scope.testInputField;
}
}
});
modalInstance.result.then(function () {
// Do stuff
}, function () {
console.log("Some Error");
});
}
I have testInputField model also in my partial view.
And this is the the modal controller
controller('ModalController', [ '$scope', '$modalInstance', 'inputTest', function ($scope, $modalInstance, inputTest) {
$scope.inputTest = angular.copy(inputTest);
$scope.keyPressed = function (key) {
$scope.inputTest+= key;
console.log($scope.inputTest);
};
} ])
So basically what I want whenever changes are made to with the keyPressed method, the modal in my main controller to be changed at the same time. Is there a possibility to accomplish this with UI bootstrap modals current code
For this remove angular.copy method and try again. As it remove the data binding of the object.
I'm invoking a bootstrap modal dialog through a link.
I want to start a timer in the angular controller when the dialog pops up. How do I detect the dialog open event in the angular controller to start the timer?
If I start timer in the scope like this,
app.controller('myctrl',
['$scope', '$window', '$timeout', 'svc',
function ($scope, $window, $timeout, svc) {
$scope.countdown = 10;
$scope.runCounter = function () {
$scope.countdown -= 1;
if ($scope.countdown > 0)
$timeout($scope.runCounter, 60000);
}
$scope.runCounter();
}]);
the timer starts when the application starts. I want the timer to start only when the dialog opens.
Thanks.
Check this out.
var modalInstance = $modal.open({...});
modalInstance.opened.then(function() {
alert("OPENED!");
});
The $modal.open() returns an object that, among other properties contains the opened promise, to be used as above.
I assume that you are using modals from http://angular-ui.github.io/bootstrap/.
If you look closely you will see that the component expose a promise that will be resolved when the dialog is opened. Which is what you will need to use. You can do something like that in the controller where the modal is created:
$scope.runCounter = function () {
$scope.countdown -= 1;
if ($scope.countdown > 0)
$timeout($scope.runCounter, 60000);
}
//Creating the dialog
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl
}
});
//Add a function for when the dialog is opened
modalInstance.opened.then(function () {
$scope.runCounter
});
See working plunker here
var modalInstance = $modal.open({
templateUrl: '../augustine_app/templates/program_purchase_popup.html',
backdrop: 'static',
controller: function ($scope, $modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
modalInstance.opened.then(function () {
var modal;
var getModalInterval = function () {
modal = document.getElementsByClassName('modal')[0];
if (modal) {
clearInterval(getModal);
modal.style.marginTop = window.screenTop + 'px';
modal.style.height = 'auto';
modal.style.position = 'absolute';
modal.style.overflow = 'visible';
}
};
modal = document.getElementsByClassName('modal')[0];
if (!modal) {
var getModal = setInterval(getModalInterval, 2000);
}
});
}
};
Unfortunatly the open.then(func) runs before the freaking modal is actually in the DOM. Hence the setInterval.
here is some non jQuery angular code.
For my case, I need to be able to detect when modal is opened inside the modal controller itself.
At first opened promise was resolved even though the modal hasn't been loaded in the DOM yet. By wrapping the call inside a $timeout, opened promise is now resolved after the modal is loaded to the DOM.
$modal.open({
templateUrl: 'modalTemplate.html',
controller: 'modalCtrl'
});
// inside modalCtrl
angular.controller('modalCtrl', ['$modalInstance', '$timeout', function($modalInstance, $timeout) {
$timeout(function() {
$modalInstance.opened.then(function() {
//do work
});
});
}]);