Угловая директива вызова $ http

Question

У меня возникли проблемы при использовании нескольких экземпляров следующей директивы. Случайно, я верну неверный список в моем методе успеха. scope.type всегда «правильный»; то есть это то, что я прошел. Ответ иногда будет ответом от другого вызова.

директива:

angular.module('dincApp.directives').directive('lwSelect', 
    ['$log', 'optionsService', '$http', 
    function ($log, optionsService, $http) { 

    return { 
     restrict: 'E', 
     replace: true, 

     scope:{ 
     placeholder : '@', 
     type : '@' 
     }, 

     link: function (scope, element, attr) { 
     $log.info('scope.type = ' + scope.type); 

     scope.options = {}; 

     $http({method: 'GET', url: '/options/' + scope.type}). 
      success(function(data, status, headers, config) { 
       $log.info('scope.type = ' + scope.type); 
       $log.info('data = ' + JSON.stringify(data)); 
       scope.options = data; 
      }). 
      error(function(data, status, headers, config) { 
       $log.debug('Error retrieving select options'); 
      }); 
     }, 

     template: 
     '<select ng-options="option.key as option.value for option in options" ' + 
     '>' + 
     '<option value="">-- {{placeholder}} {{type}} --</option>' + 
     '</select>' 

    }; 
}]); 

HTML-:

<lw-select id="stateSelect" 
      placeholder="State" 
      class="form-control" 
      name="state" 
      ng-model="profile.state" 
      type="State" 
      > 
</lw-select> 

Любые идеи? Я также пытался использовать ресурс $, но та же проблема возникает. Я не уверен, что это связано с директивой. Я испытал подобное поведение, когда я сделал несколько вызовов одного и того же $ ресурса в контроллере.

UPDATE:

Я переместил эту логику из директивы в контроллер и испытывает те же проблемы. Эти вызовы в контроллере будут работать некоторое время. Другие Я получу список государств, возвращенных странам, и наоборот. Это похоже на состояние гонки. Являются ли эти вызовы не отдельными экземплярами?

Контроллер:

 optionsService.retrieve({optionType:"State"}).$promise.then(
      function success(response) { 
       $log.debug('Options response for stateOptions:' + JSON.stringify(response)); 
       $scope.stateOptions = response; 
      }, 
      function failure() { 
       $log.error('Error retrieving select options'); 
      }); 

     optionsService.retrieve({optionType:"Country"}).$promise.then(
      function success(response) { 
       $log.debug('Options response for countryOptions:' + JSON.stringify(response)); 
       $scope.countryOptions = response; 
      }, 
      function failure() { 
       $log.error('Error retrieving select options'); 
      }); 
     .... 

Ресурс:

angular.module('dincApp.services').factory('optionsService', 
['$resource', 
    function ($resource) { 
    return $resource('/options/:optionType', {}, { 
     retrieve: { method: 'GET', isArray: true } 
    }); 
    }]); 

Answer 1

Вместо того, чтобы делать это в link сделать это в controller:

angular.module('dincApp.directives') 

.directive('lwSelect', ['$log', 'optionsService', '$http', 
    function ($log, optionsService, $http) { 

     return { 
      restrict: 'E', 
      replace: true, 

      scope: { 
       placeholder: '@', 
       type: '@' 
      }, 

      controller: ['$scope', function (scope) { 
       $log.info('scope.type = ' + scope.type); 

       scope.options = {}; 

       $http({ 
        method: 'GET', 
        url: '/options/' + scope.type 
       }). 
       success(function (data, status, headers, config) { 
        $log.info('scope.type = ' + scope.type); 
        $log.info('data = ' + JSON.stringify(data)); 
        scope.options = data; 
       }). 
       error(function (data, status, headers, config) { 
        $log.debug('Error retrieving select options'); 
       }); 
      }], 

      template: '<select ng-options="option.key as option.value for option in options" ' + 
       '>' + 
       '<option value="">-- {{placeholder}} {{type}} --</option>' + 
       '</select>' 
     }; 
    }]);