AngularJS passing data back from modal

Question

I'd appreciate some help here... I am looking at making use of AngularJS for a few projects I have in mind. Currently experimenting with the Bootstrap UI directive. Please take a look at my code here: http://pastebin.com/zJGpNLep

Is there a way I can update $scope.groups with the data from $scope.formData which is generated from a modal? I have tried $scope.groups.push($scope.formData) which has proved unsuccessful and only way I can see the new data is by refreshing the page.

Any ideas??

Thanks

Answer 1

You're on the right track, you just left out these lines:

modalInstance.result.then(function (formData) {
  //use formData
});

This should go at the end of your $scope.showAddGroupModal function as shown in the bootstrap-ui example here:

$scope.open = function () {

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

  modalInstance.result.then(function (selectedItem) {
    $scope.selected = selectedItem;
  }, function () {
    $log.info('Modal dismissed at: ' + new Date());
  });
};

Answer 2

You need to interact with the promise in the result property of the object that is returned from the call to open. That promise will be resolved when the modal is closed or rejected when the modal is dismissed. Any data that you pass to close or dismiss will be returned through the promise callbacks.

At a high level, it looks like this:

var modal = $modal.open({
   // modal setup
});

modal.result.then(function(group) {
    $scope.groups.push(group)
}, function () {
   // the modal was dismissed
});

Hope that helps.