How to import the current $Scope to the $uibModal?

Question

I have the following modal in my controller:

angular
.module('app', ['ui.bootstrap'])
.controller('AlunosController', function ($uibModal, $scope, MyPaginator) {

     $scope.alunos = new MyPaginator('/alunos');

     $scope.open = function (aluno) {

       $scope.alunoOriginal = aluno;

       $uibModal.open({
           controller: 'ModalAlunoFormController',
           resolve: {
              aluno: function () {
                 return angular.copy(aluno);
              }
           }
       })
     };
})

.controller('ModalFormAlunoController', function ($uibModalInstance, aluno) {
    $scope.aluno = aluno;
});

I can perfectly import the aluno to the controller modal, the ModalFormAlunoController, using the option resolve.

But I would like to pass all the objects present on $scope of AlunosController to the ModalFormAlunoController, without having to pass one by an option route resolve.

How can I do that in Angular UI Bootstrap?

Answer 1

To do this, you need to pass the property scope as an option to $uibModal.open().

Just do it Just do it:

$uibModal.open({
    controller: 'ModalController',
    scope: $scope,
});

This will make all the objects of the $scope is imported into the $scope of the modal controller.

Response in the SOEN:

• Angularjs Passing data to bootstrap modal

I have an example in Codepen that looks like this:

angular.module('app', ['ui.bootstrap'])

.controller("AppController", function($scope, $uibModal) {

    $scope.name = "Wallace";

    $scope.modalComScope = function(size) {

        $uibModal.open({
            scope: $scope,
            animation: false,
            // Esse vai exibir o nome do scope atual
            template: '<div class="modal-body">Meu nome é {{ name }}</div>',
            controller: 'ModalInstanceCtrl',
            size: size,
        });
    };

   $scope.modalSemScope = function(size) {

        $uibModal.open({
            animation: false,
            // Esse não vai exibir o nome, pois o $scope não foi passado
            template: '<div class="modal-body">Meu nome é {{ name }}</div>',
            controller: 'ModalInstanceCtrl',
            size: size,
        });
    };

})

.controller('ModalInstanceCtrl', function($scope, $uibModalInstance) {

    $scope.ok = function() {
        $uibModalInstance.close($scope.selected.item);
    };

    $scope.cancel = function() {
        $uibModalInstance.dismiss('cancel');
    };
});

Example in Codepen

Answer 2

Angular is 2 way data bind, that is, what you set in $Scope, is set buddy, until you do something to erase the data.

In a nutshell, just inject $Scope into your modal controller like this:

.controller('ModalFormAlunoController', function ($uibModalInstance, $scope) {
    console.log($scope.aluno);
})