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?

Importunate

Answer 1

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.

Rowboat

This solution requires to inject the $scope to the controller. This is what we try to avoid. – Boggs

@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. – Rowboat

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 – Tearing

@Tearing 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. – Rowboat

I thought it worth mentioning since with controller as syntax you don't always have to inject the $scope – Tearing

This worked for me. Then binded to {{ test }} in the template by using $scope.test = "Hey there" in the controller. – Mccusker

Answer 2

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.

Importunate