Pass current scope to modalInstance when using controllerAs syntax

afterxleep picture afterxleep · Oct 16, 2015 · Viewed 21.8k times · Source

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?

Answer

Estus Flask picture Estus Flask · Oct 16, 2015

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.