From controller1 I'm opening a modal like this:
angular.module('myApp').controller('controller1', ['$scope', '$uibModal', function($scope, $uibModal) {
$scope.openFirstModal = function() {
var modalScope = $scope.$new();
var modalInstance = $uibModal.open({
templateUrl: 'views/modal1.html',
controller: 'modal1Controller',
scope: modalScope,
resolve: {},
size: 'lg'
});
modalScope.uibModalInstance = modalInstance;
};
}]);
Then, I'm opening a nested modal like this:
angular.module('myApp').controller('modal1', ['$scope', '$uibModal', function($scope, $uibModal) {
$scope.openSecondModal = function() {
// Open nested modal
var modalScope = $scope.$new();
var modalInstance = $uibModal.open({
templateUrl: 'views/modal2.html',
controller: 'modal2Controller',
scope: modalScope,
resolve: {},
size: 'lg'
});
modalScope.uibModalInstance = modalInstance;
// Close this modal
$scope.uibModalInstance.dismiss('cancel');
};
}]);
But that last part:
// Close this modal
$scope.uibModalInstance.dismiss('cancel');
...is provoking problems in the nested modal. Nothing works in my nested modal:
angular.module('myApp').controller('modal2', ['$scope', '$uibModal', function($scope, $uibModal) {
$scope.test = function() {
console.log("test");
};
}]);
If I remove the problematic piece of code, the nested modal works fine.
How can I close the first modal without making the nested modal to fail?
Ah, just found the problem.
I changed this:
// Open nested modal
var modalScope = $scope.$new();
With this:
// Open nested modal
var modalScope = $rootScope.$new();
That way the nested modal does not rely on his parent.
The parent can die and the child will continue living
Related
In this PLUNK I have an Angular UI Modal and a button to close it. The button doesn't work because the Modal instance doesn't have a close method.
If you remove the rendered statement, the button works. Why doesn't it work WITH rendered?
This DOESN'T work:
var app = angular.module('app', ['ui.bootstrap']);
app.controller('myCtl', function($scope,$uibModal) {
$scope.openModal = function() {
$scope.modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
scope: $scope
}).rendered.then(function() {
alert("modal rendered")
});
};
$scope.close = function () {
$scope.modalInstance.close();
};
})
This DOES work (see PLUNK):
var app = angular.module('app', ['ui.bootstrap']);
app.controller('myCtl', function($scope,$uibModal) {
$scope.openModal = function() {
$scope.modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
scope: $scope
});
};
$scope.close = function () {
$scope.modalInstance.close();
};
})
In the first case, you are assigning the rendered promise to $scopemodalInstance, not the instance. It works if you do something like (Plunk):
$scope.modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
scope: $scope
});
$scope.modalInstance.rendered.then(function() {
alert("modal rendered")
});
How to set new value to modal content when modal is open/active?
Here is the sample code.
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log, $timeout) {
$scope.test = "test variable"
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
test: function () {
return $scope.test;
}
}
});
$timeout( function(){
$scope.test = "Hello World!";
}, 5000 );
};
var ModalInstanceCtrl = function ($scope, $modalInstance, test) {
$scope.test = test;
$scope.$watch('test',function (newValue, oldValue) {
$scope.test = test;
});
};
In parent controller, i init the modal 1st with "test variable" and after timeout(5 seconds), i want the modal variable change to "Hello World" without close the modal.
can test here
Use $timeout function inside ModaInstanceCtrl and then change the scope value of variable accordingly. Here is the sample code:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.test = "test variable"
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
scope: $scope,
resolve: {
test: function () {
return $scope.test;
}
}
});
};
var ModalInstanceCtrl = function ($scope, $modalInstance, $timeout, test) {
$timeout(function(){
$scope.test = "variable"
}, 2000);
};
http://plnkr.co/edit/f1zhkWH6aEtZDoKv8egO?p=preview
you can directly bind controller scope to modal something like
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
scope: $scope
});
Here is working plunker
I'm trying to get modals woking with angular bootstrap. I can launch the modal just fine, but I'm having some scope issues dismissing the modal.
When I launch the modal, I can specify a controller that I can call functions from, which works, but it seems to be a copy of the controller without a $parent and without any controller-local variables.
I need access to the return value of $uibModal.open() in order to close the modal, so I'm trying to store it in var modalInstance, which works fine when I'm within the scope of the controller, but the copy of the controller passed into the $uibModal service doesn't have the local variable modalInstance set.
I can get around this by storing the return object in the $rootScope, but that seems like a bad idea. Am I wrong? What's the best way to get access to modalInstance from the click handler passed into the $uibModal service? Can I avoid using the $rootScope?
var app = angular.module('main', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $uibModal) {
var modalInstance;
$scope.launch = function() {
console.log('launch');
modalInstance = $uibModal.open({
template: '<div>Modal Content - <a ng-click="close()">Close</a></div>',
controller: 'MainCtrl',
});
// Wouldn't need to do this if I could access modalInstance in close handler
$rootScope.modalInstance = modalInstance;
}
$scope.close = function () {
console.log('close');
console.log(modalInstance);
// Works, but should I be using $rootScope like this?
//$rootScope.modalInstance.close();
// Doesn't work, modalInstance is undefined
modalInstance.close();
}
});
Angular instantiates a new instance of a controller whenever it is used, and it is the same for modal. So when you specify controller: 'MainCtrl' you're telling angular you want to instantiate one of those for your modal, which is rarely what you want.
Instead you should create a separate controller for the dialog, which can return values on closing using the $uibModalInstance service.
var app = angular.module('main', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $uibModal) {
var modalInstance;
$scope.launch = function() {
console.log('launch');
modalInstance = $uibModal.open({
template: '<div>Modal Content - <a ng-click="close()">Close</a></div>',
controller: 'DialogCtrl',
});
....
}
});
app.controller('DialogCtrl', function($scope, $uibModalInstance) {
$scope.theThingIWantToSave = [];
$scope.cancel = function () {
$uibModalInstance.close($scope.theThingIWantToSave);
};
});
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 have a page where I have a button to launch a modal. Both pages has its own controllers. The question is how to get variable from page in modal controller?
You pass data to your modal controller using resolve.
var modalInstance = $modal.open({
templateUrl: 'template.html',
controller: 'MyModalCtrl',
resolve: {
variableToPass: function () {
return $scope.items;
}
}
});
Then you define your modal controller like this
myApp.controller('MyModalCtrl', ['$scope', $modalInstance'', 'variableToPass', function($scope, $modalInstance, variableToPass) {
...
}]);
Alternatively, or complementary, you can pass the whole $scope like this
var modalInstance = $modal.open({
templateUrl: 'template.html',
controller: 'MyModalCtrl',
scope: $scope
});