Question

我正在使用以下代码。我正在读一个json文件名是＆＃34; users.json＆＃34;。如果我通过$ http在控制器中读取此文件一切正常。但我想使用我从文件中读取的数据，一次又一次地在不同的控制器中，所以我为此制作了一个工厂。但是在工厂里，我通过$http.get()从json文件中读取数据，当我在控制器中调用该服务方法并返回Object { $$state: Object }

时

app.factory('AboutFactory',['$http',function ($http) {
    return {
        getter: function () {
            return $http({
                method : 'GET',
                url : '/home/penguin/Modeles/users.json',
                cache : true
            })
            .then(function (response) {
                return response.data
            })
        }         
    }
}])

Answer 1

getter函数的结果是一个承诺。所以你应该像这样使用它：

AboutFactory.getter().then(function(res)
{
   console.log(res);
});

Answer 2

这是因为$http服务返回了promise中提到的documentation：

$ http API基于$ q公开的延迟/承诺API 服务。虽然对于简单的使用模式，这并不重要高级用法，熟悉这些API非常重要以及他们提供的保证。

你可以想出一个承诺，好像你给某人一个绝密的信息，以便亲自送给朋友，然后在交付时，通过朋友的回复向你报告。

您向该人提供消息（请求对象），以便他们可以尝试传递消息（发送请求）。
已尝试发送（请求已发送），它是：
- a）成功交付（成功回复）或
- b）你的朋友不在，所以这封信无法送达（非成功回复）。
然后，您可以根据您获得的回复采取行动
- a）发送了消息（这是一个成功的请求），你收到了一封回信（对回复做了些什么）或
- b）消息未能送达（请求未成功），因此您可以稍后重试或做其他事情，因为您没有所请求的信息

以下是将$http服务与$q服务一起使用的示例：

// app.js
(function() {

  'use strict';

  angular.module('app', []);

})();

// main.controller.js
(function() {

  'use strict';

  angular.module('app').controller('MainController', MainController);

  MainController.$inject = ['AboutFactory'];

  function MainController(AboutFactory) {

    var vm = this;

    AboutFactory.getter().then(function(data) {

      // do something with your data
      vm.data = data;

    }, function(error) {

      // give the user feedback on the error

    });

  }

})();


// about.service.js
(function() {

  'use strict';

  angular.module('app').factory('AboutFactory', AboutFactory);

  AboutFactory.$inject = ['$http', '$q']

  function AboutFactory($http, $q) {

    var service = {
      getter: getter
    };

    return service;

    function getter() {

      // perform some asynchronous operation, resolve or reject the promise when appropriate.
      return $q(function(resolve, reject) {

        $http({
          method: 'GET',
          url: 'https://httpbin.org/get',
          cache: true
        }).then(function(response) {

          // successful status code

          // resolve the data from the response
          return resolve(response.data);

        }, function(error) {

          // error

          // handle the error somehow

          // reject with the error
          return reject(error);

        });

      });

    }
  }

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<div ng-app="app" ng-controller="MainController as MainCtrl">

  <pre>{{MainCtrl.data | json}}</pre>

</div>

Answer 3

尝试这种方法。它会按照你的期望工作。

通过JSON服务在控制器中读取$http文件，因为它可以正常工作。
要将响应数据从一个控制器共享到另一个控制器，您可以创建服务并将数据存储到该服务中。

服务：

app.service('setGetData', function() {
  var data = '';
    getData: function() { return data; },
    setData: function(requestData) { data = requestData; }
});

控制器：

app.controller('myCtrl1', ['setGetData',function(setGetData) {

  // To set the data from the one controller
  var data = 'Hello World !!';  
  setGetData.setData(data);

}]);

app.controller('myCtrl2', ['setGetData',function(setGetData) {

  // To get the data from the another controller  
  var res = setGetData.getData();
  console.log(res); // Hello World !!

}]);

在这里，我们可以看到myCtrl1用于设置数据，myCtrl2用于获取数据。因此，我们可以将数据从一个控制器共享到另一个控制器。

Angular1.6工厂

3 个答案: