Display angular-ui Modal with data from a REST request (with delay)

Question

I want to open an Modal Dialog (angular-ui), but when the open() function is called, the data are not available. Data are loaded by a resource call so there's a delay.

I tried to play with the promise opened, but data are not changed.

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

    modalInstance.opened.then(function() {
          $scope.mydata = $scope.loadData();
        }, function() {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };


     $scope.loadData = function() {
        $timeout( function(){
          $log.info("data loaded");
          return "data loaded...";
        }, 3000)
      };

Something is missing in my understanding between the resolve property, the modal promises and the deferred loading.

(I would like to use restangular to load the resource).

Here is the sample : http://plnkr.co/edit/Mj6JolD06DUJd6N6ECYi

Thanks in advance for any clue

Answer 1

You are mostly there. The problem is in the way you coded the loadData function. Since you are doing an asynchronous call you can't just do a return of data like that. Instead, what you can do is in your loadData you can call a function on the modalInstance that will set a value in the $scope of the modal.

So in your ModalInstanceCtrl you can add a function like this:

$modalInstance.setMyData = function(theData) {
  $scope.mydata = theData;
};

And then you can call that in your loadData like this:

$scope.loadData = function(aModalInstance) {
  $log.info("starts loading");
  $timeout(function() {
    $log.info("data loaded");
    aModalInstance.setMyData("data loaded...");
  }, 3000);
};

You also need to make sure that you pass the instance of the modal when you call loadData:

modalInstance.opened.then(function() {
  $scope.loadData(modalInstance);
}, function() {
  $log.info('Modal dismissed at: ' + new Date());
});

I created an updated plunk so you can see how it works: http://plnkr.co/edit/M7qfegYIOqOQekoxLaj5?p=preview