I'm trying to open modal popup in another modal popup. I'm getting the following error
angular.min-1.2.29.js:93 Error: [$injector:unpr]
http://errors.angularjs.org/1.2.29/$injector/unpr?p0=%24modalInstanceNewProvider%20%3C-%20%24modalInstanceNew
at Error (native)
Below is my code
Outer Modal code
var OuterController = function($scope, $modalInstance, $timeout, $http, $window, $rootScope, mydetails,$modal) {
$scope.openInnerModal = function(){
var modalInstanceNew = $modal.open({
templateUrl: '../../TEST-ANOTHER.html',
controller: InnerController,
resolve: {
lDetails: function(){
return mydetails;
}
}
});
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
}
}
Inner Modal Code
var InnerController = function($scope, $modalInstanceNew,$timeout, $http, $window, $rootScope,lDetails,$modal) {
alert(lDetails);
$scope.cancel = function() {
$modalInstanceNew.dismiss('cancel');
}
}
The error is saying $modalInstanceNew is not a known provider. Which is exactly true. It should be $modalInstance instead.
Try the inner modal code like this:
var InnerController = function($scope, $modalInstance,$timeout, $http, $window, $rootScope,lDetails,$modal) {
alert(lDetails);
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
}
}
Related
angular-ui-modal]1 for create my site and I want to show my modal automatically when the user enter in my webpage. With ng-click is easy , I have this code:
var app = angular.module('app', ['ui.bootstrap']);
app.controller('HomeCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function(data) {
var modalInstance = $modal.open({
templateUrl: 'modals/register.html',
resolve: {
data: function() {
return data === null ? {} : data;
}
}
});
};
}]);
But I do not know how trigger the modal when load page.
Any help? Please
You just have to call the function when the controller is loaded:
var app = angular.module('app', ['ui.bootstrap']);
app.controller('HomeCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function(data) {
$scope.blurred = "blurredopen";
var modalInstance = $modal.open({
templateUrl: 'modals/register.html',
resolve: {
data: function() {
return data === null ? {} : data;
}
}
});
};
$scope.openModal(); // <-- Call it
}]);
Demo on JSFiddle
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 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 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');
};
}
]);
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;
});
}
}
});
};
});