Question

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

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

debug sizeList // output >> undefined
解决// output >> undefined
GeneralHelperService getSize // output >> [Object, Object]
在// 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;
              }
            }
          });
        }

Answer 1

您的代码稍微过于复杂，因为modal解析基本上有助于在创建模态窗口之前解决异步（promises），因此将resolve更改为$modal.open

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

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

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

这是一个简单的JSFiddle来获得想法

Answer 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;
          }
        }
      })

在asynchronus调用内部.then。因为把它放在外面是不可能的，即与asynchronus调用并行

Angular $ uibmodal使用异步化解析

2 个答案: