I am new to Angular and confused by the documentation for AngularUI modal dialog. I don't see how the code presented there would fit in with the controller for the main page, or how a button on the main page, when clicked, would open the modal dialog.
http://angular-ui.github.io/bootstrap/
Is ModalDemoCtrl supposed to be appended to the controllers of the main page's app?
var myApp = angular.module('myApp', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) {
<snip>
}
myApp.controller("ModalDemoCtrl");
or is the ModalDemoCtrl function object simply nested within the main page's controller?
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller("MainPageCtrl", function($scope, $modal, $log) {
var ModalDemoCtrl = function($scope, $modal, $log) {
<snip>
}
});
Basically it is a regular controller:
var modal = $modal.open({
templateUrl: 'deleteDialog.html',
controller: 'deleteDialogController'
});
modal.result.then(function () {
});
deleteDialogController.js file:
appModule.controller("deleteDialogController", [ "$scope", "$modalInstance",
function ($scope, $modalInstance)
{
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
]);
Related
how can i call angular ui bootstrap modal popup from inside another controller , as the condition is like instead of calling from view i need to call it from inside a function
App.controller('MailFolderController', ['$scope', '$http', '$timeout', '$stateParams', '$window', 'mails', '$interval', function ($scope, $http, $timeout, $stateParams, $window, mails, $interval) {
$scope.check = function(){
console.log("call parent ==========>")
// call open method in modal popup here
}
App.controller('orderCancellationController', ['$scope', '$modal', function ($scope, $modal) {
$scope.open = function (mail) {
var modalInstance = $modal.open({
templateUrl: '/orderCancellationBox.html',
controller: ModalInstanceCtrl,
resolve: {
mail: function () {
return mail;
}
}
});
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance, mail) {
$scope.mail = mail;
$scope.submit = function () {
$scope.$parent.check();
$modalInstance.close('closed');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
ModalInstanceCtrl.$inject = ["$scope", "$modalInstance", 'mail'];
}]);
}]);
so i want to call the open method in orderCancellationController from inside the check method , help !!
Following the example from my comment: Angular Calling Modal Open function from one controller to another
In order to open the modal from another controller you have to create a service, I did so in my app.js file, like so:
myApp.service('modalProvider',['$modal', function ($modal) {
this.openPopupModal = function () {
var modalInstance = $modal.open({
templateUrl: '/orderCancellationBox.html',
controller: 'ModalInstanceCtrl'
});
};
}]);
Then in the controller I wish to open my modal from, I inject the 'modalProvider' service, like so:
App.controller('MailFolderController', ['$scope', '$http', '$timeout', '$stateParams', '$window', 'mails', '$interval','modalProvider', function ($scope, $http, $timeout, $stateParams, $window, mails, $interval, modalProvider) {
// function to open modal
$scope.check = function(){
modalProvider.openPopupModal();
}
I am using angular bootstrap ui modal which is working fine but when I try to close it using modalInstance it gives above error.Here is my code
var app = angular.module('LoginModule', ['ui.bootstrap']);
app.controller('LoginModal', ['$scope', '$modal', function ($scope, $modal) {
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/app/template/Login.html',
controller: 'LoginController',
size: size
});
}
}]);
app.controller('LoginController', ['$scope', '$modalInstance', '$http', function ($scope, $modalInstance, $http) {
$scope.model = {};
$scope.loading = {
state: false
}
$scope.errors = '';
$scope.email = "";
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
I have created the cancel function in the controller which I specify with the template still it gives error.I use ng-click="cancel()" in button inside LoginController .
Need help?
Looks like you are instantiating the controller with ng-controller directive in the modal view. Instead you only need to use controller option of the modal in order to get the special dependency $modalInstance injected. If you have instantiated controller using ng-controller="LoginController" you need to remove it and you would not need it as well as the controller would automatically be instantiated (by resolving special dependency $modalInstance) and attached to the template.
I am trying to use AngularUI modal's and I cannot seem to figure out why it is not resolving my variables.
Function that opens the modal and the modal instance
$scope.openModal = function (size, cert) {
var modalInstance = $modal.open({
template: 'ModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
certs: function () {
return $scope.certification;
}
}
});
modalInstance.result.then(function () {});
};
Modal Controller some stuff in here is leftover from debugging
angular.module('myApp').controller('ModalInstanceCtrl', ['$scope', '$filter', '$modalInstance', function ($scope, $filter, $modalInstance, certs) {
console.log(certs);
var results = $filter('filter')(certs, {id: id})[0];
$scope.cert = results;
$scope.ok = function () {
$modalInstance.close();
};
}]);
The main issue is that when it gets into the controller I am getting undefined for certs even though it should be resolved by the openModal function. I was following the official angular UI tutorial on how to do them here: Angular UI Bootstrap Modals
In your injection of 'certs' into your controller, you need to add it to the name declaration as well as the function.
angular.module('myApp').controller('ModalInstanceCtrl', ['$scope', '$filter', '$modalInstance', 'certs', function ($scope, $filter, $modalInstance, certs) {
I'd like to have my Angular Ui Modal controller/object declared outside
it's triggering controller (& in another file), without polutting the
global namespace.
Is this possible? Is it possible to declare the modal controller
like a regular controller and somehow pass parameters in (from my
trigger controller)?
I currently have: (which ain't cool)
(function () {
TriggeringCtrl.$inject = ['$scope', 'htmlClient', 'apiCall', '$timeout', '$modal', 'utility'];
function TriggeringCtrl($scope, htmlClient, apiCall, $timeout, $modal, utility) {
};
app.controller('TriggeringCtrl', TriggeringCtrl);
var ModalCtrl = function ($scope, $modalInstance, node, apiCall, utility) {
}
});
You have example here which is not global:
http://plnkr.co/edit/fCfvcnwP9JSHbX5L2Vuu?p=preview
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $modal, $q, $timeout) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.ok = function () {
$modalInstance.close('item');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
items: function () {
var p = $q.defer(); /// simulate data
$timeout(function(){
p.resolve(['item1', 'item2', 'item3']);
});
return p.promise.then(function(data){
return data;
});
}
}
});
};
});
The modal in angular-ui example is implemented with a ModalInstanceCtrl inside a ModalDemoCtrl controller like so:
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.open = function () {
var modalInstance = $modal.open({
...
controller: ModalInstanceCtrl,
...
});
...
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
...
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
};
When trying this approach by registering the Controllers with angular like so:
app.controller('ModalInstanceCtrl', ['$scope', '$modal', '$log',
function ($scope, $modalInstance, items) {
...
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
}]);
app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log', 'ModalInstanceCtrl',
function ($scope, $modal, $log, ModalInstanceCtrl) {
$scope.open = function () {
var modalInstance = $modal.open({
...
controller: ModalInstanceCtrl,
...
});
...
};
}]);
I get the following error:
Error: Unknown provider: ModalInstanceCtrlProvider <- ModalInstanceCtrl
Should it be possible to nest controllers like this in angular?
You don't need to inject ModelInstanceCtrl into your ModalDemoCtrl. The controller definition should be
app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log',
function ($scope, $modal, $log) {
It should work without this too. If it does not try
var modalInstance = $modal.open({
...
controller: 'ModalInstanceCtrl',
...
});