Whilst I have looked at the answers here, I'm still unable to trigger my openModal() function on page load.
Within my controller, I have the code (below question), which does allow openModal() to trigger fine either from an ng-click directive or when entering the following in the Chrome console:
angular.element($0).scope().openModal()
My problem is when I'm trying to conditionally open the modal upon page load. My current code is:
$scope.openModal = function (size) {
modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'pageBuilder',
size: 'lg',
resolve: {
items: function () {
return $scope.chosenDeploymentSchedule;
}
}
});
};
angular.element(document).ready(function () {
// $scope.openModal();
console.log('Hello World');
});
I do get my Hello World printing, but when I try uncommenting the $scope.openModal();, I get an infinite loop of undefined + Hello World printing out.
I don't know if this solution is too late for this question but may be useful for someone.
Create your normal bootstrap modal
$scope.myDialog = function () {
$uibModal.open({
templateUrl: 'templatefolder/modal.html',
backdrop: 'static',
windowClass: 'modal',
size: 'lg',
controller: function ($scope, $uibModalInstance) {
$scope.cancel = function () {
$uibModalInstance.dismiss();
};
}
});
};
Call the modal in your html page like so <span ng-init="myDialog()"></span>
That's it. This works for me and I hope it will work for someone too.
You can call $scope.openModal() directly underneath where you define it in the controller. It'll open the modal right away.
Whilst still unable to call it directly from within the same controller, my solution was to add another method which gets called from an ng-init in the view:
$scope.launchModalConditionally = function(){
if(!$scope.gotCredentials){
$scope.openModal();
}
};
Related
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.
I have a form setup in angular and am using ui-bootstrap for a modal dialog that appears before submission is complete. My site is setup in Sharepoint and uses a context to determine if they are on English or Spanish version of the site and display the proper language content. I want to pass the bool value IsInEnglish to the modal to display the correct <div> but I am not finding a solution to pass this value to the scope of the modal.
$scope.continue = function () { //this is off an ng-click on a button
var modalInstance = $modal.open({
templateUrl: '_layouts/Applications/VolunteerApp/modal/myModal.html',
controller: 'vAppController'
});
modalInstance.opened.then(function () {
$scope.modalIsInEnglish = IsInEnglish;
});
};
Add a resolve to $modal's instantiation object:
var modalInstance = $modal.open({
templateUrl: '_layouts/Applications/VolunteerApp/modal/myModal.html',
controller: 'vAppController',
resolve: {
myVar: function() {
return someVal;
}
}
});
and then pass someVal as an argument of the function that invokes the modal:
$scope.continue = function (someVal)
To access someVal in the modal controller, pass it in as an argument for the modal controller:
function myModalController($scope, someVal) { // do stuff }
I'm trying to have a simple modal appear when a user clicks something that is still under construction on my demo app.
Everything works up to the point where I want the user to click the 'Close' button on the modal. When they do they get:
TypeError: Cannot read property 'dismiss' of undefined
This is what I have in my main controller:
$scope.underConstruction = function () {
var modalInstance = $modal.open({
templateUrl: 'app/shared/underconstruction.html',
controller: 'ModalInstanceCtrl',
size: 'sm',
resolve: {
'$modalInstance': function () { return function () { return modalInstance; } }
}
});
console.log('modal opened');
modalInstance.result.then(function (response) {
$scope.selected = response;
console.log(response);
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
};
Then in my ModalInstanceCtrl I have:
app.controller('ModalInstanceCtrl', ['$scope', '$modal', function ($scope, $modal, $modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
I'm using angular-ui version 0.12.0, angularjs version v1.3.11
The close() method is hit, then the above error is thrown.
I have looked around at various results and questions and seen references to bugs and other issues, but the use cases are more complex than mine - my modal just shows some text and a close button. For example, I found an answer that says:
$modalInstance is made available for injection in the controller by AngularUI Bootstrap implementation. So, we don't need any effort ro "resolve" or make it available somehow.
I was able to simplify things:
$scope.underConstruction = function () {
var modalInstance = $modal.open({
templateUrl: 'app/shared/underconstruction.html'
});
console.log('modal opened');
};
Then in my modal template:
<button class="btn btn-primary" ng-click="$dismiss('cancel')">Close this message</button>
As per the documentation:
In addition the scope associated with modal's content is augmented with 2 methods:
$close(result)
$dismiss(reason)
Those methods make it easy to close a modal window without a need to create a > dedicated controller.
I did try this earlier but I guess either something else was interfering or I didn't clear my cache.
You deliberately "defined" your $modalInstance argument as undefined by not declaring it as a dependency in your Inline Annotation Array where you're declaring the ModalInstanceCtrl controller.
It should have been:
['$scope', '$modal', '$modalInstance', function($scope, $modal, $modalInstance){ ... }]
The "we don't need any effort..." part does not mean you don't have to specify it as a dependency.
it works for me
if(typeof(alert/popover)!="undefined"){
await alert/popover.dismiss();
}
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 using the AngularJS $modal service (ui.bootstrap.modal) to present a dialog box:
$modal.open({
templateUrl: 'resources/qad/qraview/view/qModalDialog.html',
controller: qModalDialogController,
backdrop: 'static',
keyboard: false,
resolve: {
modalOptions: function () {
return $scope.modalOptions;
}
}
});
The call to $modal.open is asynchronous and returns immediately. Because of the flow of my program I need $modal.open to block until the user has dismissed the dialog box either by clicking "OK" or "Cancel". Is there any way to make $modal.open be synchronous?
Use the promise returned by the result property (as PSL also stated). The code would then look something like this:
$modal.open({
templateUrl: 'myModal.html',
controller: 'ModalDialogController',
})
.result.then(
function () {
alert("OK");
},
function () {
alert("Cancel");
}
);
And here is a fiddle