如何将服务中的承诺退还给我的控制器？

I have asked this is several variations but I now have some definitive code that contains a bug I can't dig out.

我已经问过这是几个变种,但我现在有一些确定的代码,其中包含一个我无法挖掘的错误。

I have an Angular service like this:

我有这样的Angular服务:

.service("lookupDataService", [
        '$q', '$http', '$timeout',  function($q, $http, $timeout) {
    this.brokers = function() {
        var cachedBrokers = localStorage.getItem("brokers");

        if (!cachedBrokers) {
            return $http.get('/api/brokers')
                .success(function (data) {
                    localStorage.setItem("brokers", data);
                });
        } else {
            return $timeout(function () {
                return {
                    "data": localStorage.getItem("brokers")
                }
            }, 1000);
        }
    }
}])

and I consume this service in my controller

我在我的控制器中使用此服务

$scope.loadData = function() {
    $scope.promise = $q.all([
        lookupDataService.brokers()
        .then(function(data) { $scope.enquiriesBrokers = data; }),
    ]);
};

Now I know there are several problems with this code, but I am mainly focused on trying to return a promise to my controller from the service. For example, the $q apparently does nothing with its promise, but I assure you it does later in the code.

现在我知道这个代码存在一些问题,但我主要关注的是尝试从服务中向我的控制器返回一个promise。例如,$ q显然没有做任何承诺,但我向你保证它会在代码后面做。

Inspecting the data in the service retrieves the desires results, but when this trickles to the controller, the data is [Object object] rather than an array of these.

检查服务中的数据会检索所需的结果,但是当这个数据流向控制器时,数据是[Object object]而不是这些数据的数组。

How do I return a promise when I don't have one?

如果我没有承诺,我该如何回复呢?

Here is a sample of the JSON returned from the service:

以下是从服务返回的JSON示例:

And here is a sample of the HTML:

以下是HTML的示例:

<div class="col-sm-4">
    <label for="enquiries-broker">Broker:</label>
    <select ng-model="equiriesSelectedBroker" class="form-control" ng-options="broker.brokerCodeField for broker in enquiriesBrokers" id="enquiries-broker">
        <option value="">Please select a broker</option>
    </select>
</div>

1 个解决方案

#1

Use the $q object and return promise

使用$ q对象并返回promise

.service("lookupDataService", [
    '$q', '$http', '$timeout',  function($q, $http, $timeout) {
this.brokers = function() {
   var defer = $q.defer()

    var cachedBrokers = localStorage.getItem("brokers");

    if (!cachedBrokers) {
          $http.get('/api/brokers')
            .success(function (data) {
                 // defer resolve
                 defer.resolve({data:data}) 
                localStorage.setItem("brokers", angular.toJson(data));
            });
    } else {
         // defer resolve
         defer.resolve({data:angular.fromJson(cachedBrokers) })
    }
   // defer return promise
   return defer.promise;
  }
 }])

So you will always get promise from service even if there is no $http call

因此,即使没有$ http呼叫,您也将始终从服务中获得承诺

EDIT:

Populating SELECT with JSON so the ng-model will obtain userIdField

使用JSON填充SELECT,以便ng-model获取userIdField

broker.userIdField as broker.brokerCodeField for broker in enquiriesBrokers is telling that use broker.userIdField as value and broker.brokerCodeField as label

broker.userIdField作为broker.brokerCodeField,用于enquiriesBrokers中的代理,它告诉我们使用broker.userIdField作为值,使用broker.brokerCodeField作为标签

<select ng-model="equiriesSelectedBroker" class="form-control" 
ng-options="broker.userIdField as broker.brokerCodeField for broker in enquiriesBrokers" id="enquiries-broker">
    <option value="">Please select a broker</option>
</select>