javascript - Angular $uibmodal 异步解析

Question

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

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

1. 在//输出 >> 之外调试 sizeList
2. 解析//输出>>未定义
3. GeneralHelperService getSize//输出 >> [对象，对象]
4. 在//output >> [Object, Object] 内调试 sizeList

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

1. 如何使(1)和(2)在(3)和(4)之后发生，而不是保证(2)有数据
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;
              }
            }
          });
        }

Answer 1

您的代码稍微复杂一些，因为 modal 解析基本上有助于在创建模态窗口之前解决异步( promise )，因此请更改 $modal 的 resolve .打开到

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

然后在您的 Controller ControlModal 中，您应该能够通过 sizeList 访问返回数据，并且不要忘记在您的 Controller 中进行依赖项注入(inject) sizeList Controller 。

顺便说一句，刚刚注意到您在 $http.get 中返回了 uniqueSizes = data.data;，请确保返回 data.data; >

这是一个简单的 JSFiddle得到这个想法