Angular bootstrap modal controller scope

Question

I'm trying to get modals woking with angular bootstrap. I can launch the modal just fine, but I'm having some scope issues dismissing the modal.

When I launch the modal, I can specify a controller that I can call functions from, which works, but it seems to be a copy of the controller without a $parent and without any controller-local variables.

I need access to the return value of $uibModal.open() in order to close the modal, so I'm trying to store it in var modalInstance, which works fine when I'm within the scope of the controller, but the copy of the controller passed into the $uibModal service doesn't have the local variable modalInstance set.

I can get around this by storing the return object in the $rootScope, but that seems like a bad idea. Am I wrong? What's the best way to get access to modalInstance from the click handler passed into the $uibModal service? Can I avoid using the $rootScope?

var app = angular.module('main', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $rootScope, $uibModal) {
  var modalInstance;

  $scope.launch = function() {
    console.log('launch');
    modalInstance = $uibModal.open({
      template: '<div>Modal Content - <a ng-click="close()">Close</a></div>',
      controller: 'MainCtrl',
    });

    // Wouldn't need to do this if I could access modalInstance in close handler
    $rootScope.modalInstance = modalInstance;
  }

  $scope.close = function () {
    console.log('close');
    console.log(modalInstance);

    // Works, but should I be using $rootScope like this?
    //$rootScope.modalInstance.close();

    // Doesn't work, modalInstance is undefined
    modalInstance.close();
  }
});

andyhasit · Accepted Answer · 2016-02-22 01:51:49Z

2

Angular instantiates a new instance of a controller whenever it is used, and it is the same for modal. So when you specify controller: 'MainCtrl' you're telling angular you want to instantiate one of those for your modal, which is rarely what you want.

Instead you should create a separate controller for the dialog, which can return values on closing using the $uibModalInstance service.

var app = angular.module('main', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $rootScope, $uibModal) {
  var modalInstance;

  $scope.launch = function() {
    console.log('launch');
    modalInstance = $uibModal.open({
      template: '<div>Modal Content - <a ng-click="close()">Close</a></div>',
      controller: 'DialogCtrl',
    });
    ....

  }

});

app.controller('DialogCtrl', function($scope, $uibModalInstance) {
  $scope.theThingIWantToSave = [];
  $scope.cancel = function () {
    $uibModalInstance.close($scope.theThingIWantToSave);
  };
});

answered Feb 22, 2016 at 1:51

andyhasit

15.5k7 gold badges54 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Real Root Over a year ago

This is a simplified example, but I have a bunch of functionality in the MainCtrl I want to reference from within the modal, which is why I want to use this controller instead of making a new one for the modal. Assuming I have scope functions in MainCrtl that I need to reference, what's the best way to handle this? Can I cross-reference some functions from MainCtrl, or am I better off with my original solution?

andyhasit Over a year ago

If you have functionality that you want to use outside of a controller you should really put that in a service. Controllers should only really provide bindings for the UI and handle UI events, everything else (data and logic) should belong in services.

Real Root Over a year ago

Interesting, I find this a little counter intuitive, but I think I see what you're getting at. Do you know of any articles that go over the idea of wrapping general functionality in services?

andyhasit Over a year ago

Think of controllers as small disposable widgets that get glued to sections of the DOM, the real work happens in factories/services. Angular's concept guide is a good intro: docs.angularjs.org/guide/concepts Angular's docs can be difficult to navigate but it's really worth spending your time browsing.

Collectives™ on Stack Overflow

Angular bootstrap modal controller scope

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related