Wie wird der Wert, der von $ http.get() an eine Variable im Controller zurückgegeben wird, zugewiesen?

Question

Ich habe den separaten Dienst zum Abrufen von Daten vom Server erstellt, aber ich möchte die Daten zuweisen, die dieser Dienst in den Controllern als Variable zurückgibt. In diesem Fall handelt es sich bei Daten um eine einfache JSON-Datei.

Hier ist mein Service

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

und hier ist mein Controller

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

    $scope.text = TextService.text; 


}]); 

dann versuche ich $ scope.text angezeigt werden, aber es funktioniert nicht. (Ich habe Controller in html zugewiesen)

Ich denke, ich werde einige Hilfsfunktion verwenden müssen, da TextService asynchron ist. Ich würde gerne verstehen, wie es funktioniert und warum es jetzt nicht funktioniert. und ist es eine gute Struktur, $ http Anruf in Dienst zu wickeln?

Answer 1

Ihr Dienst muss Methoden zur Verfügung stellen, um Text zu erhalten:

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

Und Ihr Controller Aufruf des Service:

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

Answer 2

Sie müssen nur dieses in Ihrem HTML ändern:

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

Oder, wenn Sie es vorziehen, in Ihrem -Controller:

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

Answer 3

Sie TextService.text statt nur TextService in der Steuerung verwendet werden soll. TextService ordnet die Antwort auf eine text Eigenschaft, die Sie

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 Access- brauchen -

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