如何将服务的 $http.get() 返回的值分配给控制器中的变量？答案

【问题标题】：How to assign value returned by service's $http.get() to a variable in controller?如何将服务的 $http.get() 返回的值分配给控制器中的变量？
【发布时间】：2016-06-01 17:40:33
【问题描述】：

我已经创建了用于从服务器获取数据的单独服务，但我想将此服务返回的数据分配给控制器中的变量。在这种情况下，数据是一个简单的 JSON 文件。

这是我的服务

angular.module('app')
  .service('TextService', ['$http', function CompanyService($http) {
      var service = {};
      $http.get('text.json').
            then(function (response) {
                service.text = response.data.text;
                console.log(response.data.text);
            }, function (response) {
                alert(response);
            });


      return service;
  }]);

这是我的控制器

app.controller("myCtrl", ['$scope', 'TextService', function($scope, TextService){

    $scope.text = TextService.text;


}]);

然后我尝试显示 $scope.text，但它不起作用。（我在 html 中分配了控制器）

<div class="content">
    <h1>{{text}}</h1>
</div>

我想我需要使用一些辅助函数，因为 TextService 是异步的。我很想了解如何使它工作以及为什么它现在不起作用。在服务中包装 $http 调用是否是一个好的结构？

【问题讨论】：

text 属性实际上存储了数据。您应该使用TextService.text 而不仅仅是TextService。

标签： javascript angularjs http angularjs-http

【解决方案1】：

您的服务必须提供获取文本的方法：

angular.module('app')
.service('TextService', ['$http', '$q', function CompanyService($http, $q) {
    var text;
    var service = {
      getText: function() {
          var defered = $q.defer();
          if(text == undefined) {
            $http.get('text.json').then(function success(data) {
              text = data.text;
              deferred.resolve(data.text); 
            },
             function error(err) { defered.reject(err) });
           }
           else {
             defered.resolve(text);
           }
           return defered.promise;
      }
  };
  return service;
}]);

你的控制器调用服务：

app.controller("myCtrl", ['$scope', 'TextService', function($scope,    TextService){
 TextService.getText().then(function(text) { $scope.text = text } );
}]);

【讨论】：

谢谢，它有效。但是服务是否可以只从服务器返回数据？因为现在每次我在不同的控制器中需要这些数据时，我都必须执行 HTTP 请求，而服务返回数据只会发生一次。
我更新了我的示例。您可以在第一次调用服务器时存储该值，并使用 Promise 来管理您是否调用服务器或获取存储值。
或者你可以在服务对象之外做你的http请求

【解决方案2】：

您只需要在您的 HTML 中进行更改：

<div class="content">
    <h1>{{text.text}}</h1>
</div>

或者，如果您喜欢在您的控制器中：

app.controller("myCtrl", ['$scope', 'TextService', function($scope, TextService){
    $scope.text = TextService.text;
}]);

【讨论】：

【解决方案3】：

您应该在控制器中使用TextService.text 而不仅仅是TextService。TextService 将响应分配给您需要访问的text 属性-

AngularJS

var app = angular.module('myApp',[]);
app.service('TextService',  function CompanyService() {
      var service = {};
      service.text = "hello world";
      return service;
});
app.controller("MyController", ['TextService', function(TextService){
    this.text = TextService.text;
}]);

HTML -

<div ng-controller="MyController as myCtrl">
    <p>{{ myCtrl.text }}</p>
</div>

【讨论】：