Sharing data between controller and angular-bootstrap $modal

Question

I am using angular-bootstrap $modal and I have issue understand how to share data between a controller and the modal.

Controller:

app.controller 'MainController', ($scope, $templateCache) ->      
  $scope.openModal = ->
    modal = $modal.open(
      template: $templateCache.get('modal.html')
      controller: modalController
      size: 'sm'
      resolve:
        repository: ->
          $scope.repository
    )

Modal:

modalController = ($scope, $modalInstance, repository) ->
  $scope.repository = repository

  $scope.update = (other_repo) ->
    $scope.repository = other_repo  
    $modalInstance.dismiss('cancel')

At this point I expect $scope.repository from MainController to be updated when it is changes from the modal, but it is not the case.

What am I missing?

Thank you

JB Nizet · Accepted Answer · 2014-07-30 22:02:11Z

3

The modal controller has a scope that is different from the controller which opened the modal. To get back some data from the dialog once it's closed, you should get it from the result promise, as shown in the example in the documentation:

modal = $modal.open(...);

modal.result.then(function (otherRepo) {
  $scope.repository = otherRepo;
}

edited Jul 30, 2014 at 22:02

answered Jul 30, 2014 at 21:37

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Comments

IUnknown · Accepted Answer · 2014-07-30 21:54:39Z

1

If you not passing controller's scope into $modal, it create new one, prototypically inherited from the $rootScope: var modalScope = (modalOptions.scope || $rootScope).$new(); and there is no connection to opener's controller scope from this one. But you can pass into modal scope of controller which open it:

  $scope.open = function (size) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      size: size,
      scope: $scope
    });

This time, scope in ModalInstanceCtrl will inherit parent controller's scope and all changes will be reflected in opener controller's scope.

Look at this plunker (it's slightly changed sample from Bootstrap-UI) selected object from opener scope updated in modal and this update immediately reflected in view of the ModalDemoCtrl controller.

answered Jul 30, 2014 at 21:54

IUnknown

22.5k4 gold badges41 silver badges71 bronze badges

1 Comment

JB Nizet Over a year ago

That won't work in the case of the OP, since he doesn't modify anobject coming from the controller scope: he writes to the child scope directly. So the controller scope will be left unchanged.

Collectives™ on Stack Overflow

Sharing data between controller and angular-bootstrap $modal

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related