How to import the current $ scope into $ uibModal?

Question

How to import the current $ scope into $ uibModal?

Navigation

#1 by (3 votes)
#2 by (-1 votes)

2

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 seamlessly import aluno to controller of modal, ModalFormAlunoController , using the resolve option.

But I would like to pass all objects present in $scope from AlunosController to ModalFormAlunoController , without having to pass one by one via option resolve .

How can I do this in the Angular UI Bootstrap ?

angularjs angular-ui-bootstrap

asked by anonymous 21.09.2016 / 18:30

2 answers

Error executing query sql server + php + pdo Automate iOS app publishing

score 3 · Answer 1

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

Just do this:

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

This will cause all objects of $scope current to be imported to $scope of the modal controller.

SOEN response:

AngularJS passing data to modal bootstrap

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 on Codepen

score -1 · Answer 2

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

In a nutshell, you simply inject $ scope into the controller of your modal like this:

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