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