Pass current scope to modalInstance when using controllerAs syntax

Question

I'm using controllerAs syntax to avoid a $scope soup in my controllers, and also using ui.bootstrap to present a modal view.

I need to open a modalInstace that shares the same scope as the current controller. When injecting the scope, you could probably do something like:

var modalInstance = $uibModal.open({
      templateUrl: 'addEditModal.html',
      scope: $scope
    });

However as I'm not injecting the scope, and using controllerAs syntax, that will not work.

From what I've found, you will need to use resolve to pass the data, but you have to pass it explicitly via functions. Is there a way to pass the entire scope?

There is a bunch of stuff I need to do in that modal and passing loads of data seems overkill.

Don't want to do this, as it seems messy...

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    user: function() {
        return vm.user;
    },
    something: function() {
        return vm.something;
    },
    blah: function() {
        return blah;
    }
  }
});

Any better ideas?

Estus Flask · Accepted Answer · 2015-10-16T07:15:19.517

15

I need to open a modalInstace that shares the same scope as the current controller.

Modal service creates inherited scope. And

var modalInstance = $uibModal.open({
  templateUrl: 'addEditModal.html',
  scope: $scope
});

does not inject the scope but specifies parent scope for modal controller (otherwise root scope will be used as the parent).

Since controllerAs was used on parent controller, modal controller will have access to inherited vm object on its scope.

edited Oct 16 '15 at 07:15

answered Oct 16 '15 at 07:08

Estus Flask

206,104
70
425
565

1

This solution requires to inject the $scope to the controller. This is what we try to avoid. – BenRoe Jul 11 '16 at 17:46
@Bendim As said in the answer, it does not inject the scope but specifies parent scope for modal controller. It can be a controller's `$scope` or `scope = $rootScope.$new()` scope in some service. `$uibModal` was designed to work like that. Who's 'we'? If you have similar problem, feel free to post a question that reflects your particular case. – Estus Flask Jul 11 '16 at 18:01
1

The seems like half the answer. you then have to inject $scope into your modal controller, then you can access parent scope variables as $scope.controllerasname.variable – nuander Dec 15 '16 at 17:21
@nuander The answer addresses the question directly and wasn't intended to be a step-by-step tutorial. That's immediate level topic, I assume that the reader is already aware of the fact that $scope should be injected into controller in order to be used. But thanks for useful comment, hope this can help somebody. – Estus Flask Dec 15 '16 at 17:44
I thought it worth mentioning since with controller as syntax you don't always have to inject the $scope – nuander Dec 15 '16 at 19:44
This worked for me. Then binded to {{ test }} in the template by using $scope.test = "Hey there" in the controller. – mintedsky Jan 30 '18 at 16:01

score 8 · Answer 2 · answered Oct 17 '15 at 03:34

Not sure If I understood correctly, but I got it working by passing/injecting the current 'controllerAs' in the resolve parameter

var modalInstance = $uibModal.open({
      templateUrl: 'addEditModal.html',
      controller: 'AudioItemAddEditCtrl as vm',
      resolve: {
        parent: function(){
            return vm
        }
    }
    });

And then, in the AudioItemAddEditCtrl...

var AudioItemAddEditCtrl = function(parent, AudioItemService, $ModalInstance) {
...
}

Then I'm able to use 'parent' to access the parent controller scope directly.

Hope this helps someone else.

Pass current scope to modalInstance when using controllerAs syntax

2 Answers2

Linked