Question

我已创建了用于从服务器获取数据的单独服务，但我想将此服务返回的数据分配给控制器中的变量。在这种情况下，数据是一个简单的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（）返回的值赋给控制器中的变量？

3 个答案: