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();
}
Related
I have this code:
app.controller('addEmployeeCtrl', function($scope, $uibModalInstance, newEmployee){
$scope.addNewVehicle=function(){
// I want to open a new modal here
};
});
You should be able to open a second modal in much the same way as you opened the first...
Inject the $uibModal service into addEmployeeCtrl and make a call to $uibModal.open() passing in another modal configuration object.
app.controller('addEmployeeCtrl', function($scope, $uibModalInstance, $uibModal, newEmployee){
$scope.addNewVehicle = function(){
var modalInstance = $uibModal.open({
templateUrl: 'addVehicle.html',
controller: 'addVehicleCtrl',
controllerAs: 'vehicleVm'
// Any other modal config properties here
}
modalInstance.result.then(closedCallback, dismissedCallback);
function closedCallback(){
// Do something when the modal is closed
}
function dismissedCallback(){
// Do something when the modal is dismissed
}
};
});
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 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.
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();
}
};
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