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

Question

我已经创建了从服务器获取数据的单独服务，但我想将此服务 returns 的数据分配给控制器中的变量。在这种情况下，数据是一个简单的 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 调用是一个好的结构吗？

Answer 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 } );
}]);

Answer 2

您只需在 HTML:

中更改此设置

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

或如果您喜欢 控制器:

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

Answer 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>

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

How to assign value returned by service's $http.get() to a variable in controller?

javascript

http

angularjs

angularjs-http