Angular Js：如何将工厂数据提取到控制器

Hi I am trying to pull my angular js factory data to my controller, please have a look if there is any issue.

嗨，我想把我的角度js工厂数据拉到我的控制器，请看看是否有任何问题。

factory.js

factory.js

.factory('History', ['$http', '$q', function ($http, $q) {

        function history () {

            // angular.extend(SearchOptions.getDefaults(), params, options);
            var deferred = $q.defer();

            $http({
                method: 'GET',
                url: '/res/orders/' + 31536427 + '/history-group'
            })
            .success(function (res) {
            // console.log(res);

            })
            .error(function (err) {
                // TODO error handler
                deferred.reject(err);
            });

            return deferred.promise;
        }

        return {
            history: history
        };
    }]);

controller.js

controller.js

.controller('HistoryCtrl', ['$scope', '$state', '$stateParams', 'History', function($scope, $state, $stateParams, History) {

      History.history().then(function(res) {
          console.log(res);
          $scope.history = res.body;
          console.log($scope.history);

        }, function(err) {
          // TODO error handler
          console.log(err);

        })
        .finally(function(err) {

        });



  }]);

2 个解决方案

#1

You need to pass the response in the success function in the 'History' factory as below:

您需要在“历史记录”工厂的成功函数中传递响应，如下所示：

.success(function (res) {
   // console.log(res);
   deferred.resolve(res);
})

#2

The issue with your code is you are not resolving the promise after getting the data in the success callback function. Resolve it as shown below in the .success callback function :

您的代码的问题是您在成功回调函数中获取数据后没有解决承诺。在.success回调函数中如下所示解析它：

deferred.resolve(res);

Few points to improve your code:

几点没有改善你的代码：

$http service in Angular by default returns a promise. Hence, you don't have to explicitly construct a promise using $q which is an anti pattern (Deferred anti-pattern). Just returning $http object from the service itself will do the job. Doing return $http() is equivalent to return deferred.promise() in your code.

默认情况下，Angular中的$ http服务返回一个promise。因此，您不必使用$ q显式构造一个承诺，这是一种反模式（延迟反模式）。只需从服务本身返回$ http对象即可完成工作。返回$ http（）等效于在代码中返回deferred.promise（）。
.success and .error callbacks are deprecated in the latest version(1.6) of AngularJs (Deprecation Notice). The disadvantage of using these is that they are not chainable as they ignore return values. Hence, it is better to use .then instead.

在AngularJs的最新版本（1.6）中弃用了.success和.error回调（弃用通知）。使用它们的缺点是它们不可链接，因为它们忽略了返回值。因此，最好使用.then代替。

Applying above changes, your service can be refactored to below :

应用以上更改后，您的服务可以重构为以下内容：

.factory('History', ['$http', function ($http) {

    function history () {
        return $http({
                     method: 'GET',
                     url: '/res/orders/' + 31536427 + '/history-group'
               })
               .then(successCallback, errorCallback);
     }

   function successCalback (res) {
         return res;
   }

   function errorCalback (err) {
         return err;
   }

    return {
        history: history
    };
}]);

#1