带有异步角化的角度$ uibmodal解析

Question

I have a service that gets data from a server. After retrieving data successfully, I would pass to a $uimodal in a directive. My code is described below

Problem is when I run my app first time, console log shows consequence like

1. debug sizeList outside // output >> undefined
2. resolve // output >> undefined
3. GeneralHelperService getSize // output >> [Object, Object]
4. debug sizeList inside // output >> [Object, Object]

I speculate that is due to a synchronization causing (3) and (4) to happen after (1) and (2). My question is

1. How to make (1) and (2) happen after (3) and (4) instead to guarantee (2) have data
2. is there any proper way to implement rather than my approach

Thank you

Service

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

Directive

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

You slightly over complicated your codes, as modal resolve basically helps to resolve async (promises) before creating modal window, so change your resolve of $modal.open to

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

Then in your controller ControlModal you should be able to access the return data via sizeList and don't forget dependency injection sizeList in your controller.

Btw, just noticed in your $http.get you return uniqueSizes = data.data; , make sure you return data.data;

Here is a simple JSFiddle to get the idea

Answer 2

put

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

inside .then of asynchronus call. Because its not poosible to put that outside ie parallel to asynchronus call