使用来自REST请求的数据显示angular-ui模态（带延迟）

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.

我想打开模态对话框(angular-ui),但是当调用open()函数时,数据不可用。数据由资源调用加载,因此存在延迟。

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.

我在resolve属性,模态承诺和延迟加载之间的理解中缺少某些东西。

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

(我想使用restangular来加载资源)。

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

以下是示例:http://plnkr.co/edit/Mj6JolD06DUJd6N6ECYi

Thanks in advance for any clue

提前感谢任何线索

1 个解决方案

#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.

你大部分都在那里。问题在于您编写loadData函数的方式。由于您正在进行异步调用,因此您无法像这样返回数据。相反,您可以在loadData中执行的操作,您可以在modalInstance上调用一个函数,该函数将在模态的$ scope中设置一个值。

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

所以在你的ModalInstanceCtrl中你可以添加这样的函数:

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

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

然后你可以在你的loadData中调用它,如下所示:

$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:

您还需要确保在调用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

我创建了一个更新的插件,以便您可以看到它是如何工作的:http://plnkr.co/edit/M7qfegYIOqOQekoxLaj5?p = preview

#1