Passing data between modal and controller

Question

How can I make data available in a controller? I have created a really simple Plunk that should show data on the $scope in a modal. I’ll then need to update the data, and only update $scope on clicking “ok”. Clicking “cancel” will discard the changes.

But before I get to that step, I need to make the scope available to the modal. Most of the examples use two controllers. Do I need another controller as in this example: Passing Data to Twitter Bootstrap Modal in Angular? In my controller I have the following:

$scope.open = function(){
  var modalInstance = $uibModal.open({
    templateUrl: 'modal.html',
    controller: 'ModalInstanceController',
    resolve: {
      users: function() {
        return $scope.users;
      }
    }
  });
};

How can I display the users in the template? The plunk is here: http://plnkr.co/edit/FuXjSwtljQtFYOtFRV18?p=preview

may be help u http://stackoverflow.com/questions/34762225/how-pass-data-to-mddialog-in-angular-material — Hadi J, Mar 01 '16 at 11:51

score 10 · Accepted Answer · answered Mar 01 '16 at 11:51

To be able to access scope of the controller you need to pass scope object to the modal when creating an instance of it:

  $scope.open = function() {
    var modalinstance = $uibModal.open({
      scope: $scope,
      templateUrl: 'modal.html',
      resolve: {
        users: function() {
          return $scope.users;
        }
      }
    })
  };

This way Angular will create child scope of the controller $scope so you will be able to access items inside of modals scope:

Demo: http://plnkr.co/edit/0m9oktX2JHFmeiaDfOpO?p=preview

score 2 · Answer 2 · answered Mar 01 '16 at 12:19

2

You can access scope in modal -

 $scope.open = function(){
    var modalinstance = $uibModal.open({
      templateUrl: 'modal.html',
      scope:$scope

    })
  };

answered Mar 01 '16 at 12:19

Shailendra Singh Deol

637
3
5

Thanks i just added scope as a parameter declaration and it worked perfectly, thank you very much for your advice. – Alvaro Castro Jan 27 '17 at 20:56

JulioCT · Answer 3 · 2016-03-01T12:47:36.583

you can do it with just one controller, is just that is a "dirty" solution, because both html files will share the same controller, which is potentially an issue.

the problem you are facing is that in the modal you don't have a defined scope, so the foreach (ng-repeat) you are doing is not getting any elements

you can fix it easily by changing your modal.html to

<div ng-controller="modalController"><div class="modal-header">
  <h3 class="modal-title">Modal</h3>
</div>
<div class="modal-body">
  <p>Existing users:</p>
  <ul>
    <li ng-repeat="user in users">{{user}}</li>
  </ul>

</div>
<div class="modal-footer">
  <button class="btn btn-default" type="button">Close</button>
</div>
</div>

as you see, now this modal has a controller (the same as the main window) and so will have a scope

or else just pass the scope to the modal definition adding

var modalinstance = $uibModal.open({
      scope: $scope,...

is dirty, and you are "polluting" the scope, but it works :)

score 0 · Answer 4 · answered Mar 01 '16 at 12:14

Here is some code from my current project it works as expected if you want to use any ng-click on the modal your function has to reside in ModalInstanceController

app.controller('dashboardCtrl', function ($scope, $rootScope, $location, $http, Data, $uibModal ) {

   $scope.users = '';

  $scope.open = function(){
     var modalInstance = $uibModal.open({
        templateUrl: 'modal.html',
        controller: 'ModalInstanceController',
        resolve: {
           users: function() {
             return $scope.users;
           }
        }
     })
   }
});

app.controller('ModalInstanceController', function ($scope, $uibModal, $uibModalInstance, users, $rootScope, $http, Data) {
  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  }

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  }

  $scope.users = users ;
  $scope.selected = {
   users: $scope.users[0]
  };
});

Passing data between modal and controller

4 Answers4