Angular $uibmodal 通过异步解析答案

【问题标题】：Angular $uibmodal resolve with asynchornizationAngular $uibmodal 通过异步解析
【发布时间】：2016-10-04 03:41:38
【问题描述】：

我有一个从服务器获取数据的服务。成功检索数据后，我将在指令中传递给 $uimodal。我的代码如下所述

问题是当我第一次运行我的应用程序时，控制台日志显示的结果类似于

debug sizeList outside // output >> undefined
解决 //output >> undefined
GeneralHelperService getSize // output >> [Object, Object]
debug sizeList inside // output >> [Object, Object]

我推测这是由于同步导致 (3) 和 (4) 在 (1) 和 (2) 之后发生。我的问题是

如何让 (1) 和 (2) 在 (3) 和 (4) 之后发生，而不是保证 (2) 有数据
有什么合适的方法来实现而不是我的方法

谢谢

服务

angular.module('myApp')
  .service('GeneralHelperService', function($http, $q) {
    var model = this;
    var uniqueSizes;
    model.getSizeList = function() {
        var url = 'api/size/' + input;
        if (uniqueSizes) return $q.when(uniqueSizes);
        return $http.get(url).then(function (data) {
            console.log('GeneralHelperService getSize', data.data);
            return uniqueSizes = data.data;
        })
    };
  }

指令

angular.module('myApp')
    .directive('aDirective', function ($modal) {
      return {
        restrict: 'E',
        controller: function ($scope) {},
        link: function (scope, el, attrs, modal) {
          GeneralHelperService.getSizeList().then(function (sizeList) {
            scope.sizeList = sizeList;
            console.log('debug sizeList inside', JSON.stringify(scope.sizeList));
          });
          console.log('debug sizeList outside', JSON.stringify(scope.sizeList));
          var modalInstance = $modal.open({
            template: '<div>{{sizeList}}</div>',
            size: 'sm',
            controller: 'ControlModal as controlModal',
            resolve: {
              sizeList: function () {
                console.log('resolve', scope.sizeList);
                return scope.sizeList;
              }
            }
          });
        }

【问题讨论】：

标签： javascript angularjs asynchronous angular-ui-bootstrap

【解决方案1】：

您的代码稍微复杂了一点，因为modal resolve 基本上有助于在创建模式窗口之前解决异步（承诺），所以将$modal.open 的resolve 更改为

resolve: {
   sizeList: function(GeneralHelperService) {
       return GeneralHelperService.getSizeList();
   }
}

然后在您的控制器ControlModal 中，您应该能够通过sizeList 访问返回数据，并且不要忘记您的控制器中的依赖注入sizeList。

顺便说一句，刚刚注意到你的$http.get你return uniqueSizes = data.data;，确保你return data.data;

这里是一个简单的JSFiddle 来了解这个想法

【讨论】：

【解决方案2】：

放

var modalInstance = $modal.open({
        template: '<div>{{sizeList}}</div>',
        size: 'sm',
        controller: 'ControlModal as controlModal',
        resolve: {
          sizeList: function () {
            console.log('resolve', scope.sizeList);
            return scope.sizeList;
          }
        }
      })

在异步调用的 .then 中。因为它不可能把它放在外面，即与异步调用并行

【讨论】：