Question

我是angular js的新手，我将接收到的数据从我的服务文件发送到控制器时出现问题，最终绑定到我的html。有人可以帮我解决这个问题。谢谢。

服务文件

"use strict";

angular.module("fleetListModule").service("fleetsService",

 function ($http) {
             this.getTrucks = function () {
                 console.log("before calling webservice");
                 $http.get('http://localhost:8080/login/rest/truckservices/getTrucks?truckId')
                 .success(function (data){
                     var trucks = data;
                     console.log("after calling webservice my data is", trucks);
                     return trucks;
                 });

             };            
         });

控制器

"use strict";

angular.module("fleetListModule").controller("fleetListController",
    ['$scope', 'fleetsService',  
function ($scope, fleetsService) {

   var truckData = fleetsService.getTrucks();
   console.log("inside fleet service", truckData);
   $scope.trucks = truckData;        
    console.log("outside fleet service", truckData);
 }]);

HTML

<div class="panel1 panel-primary">
    <div class="panel-heading" align="center">TRUCKS</div>
    <table class="table  table-condensed table-striped " >
        <thead class="truck-list-header">
            <tr class="truck-list-header">
                <th>Truck ID</th>
                <th>Status</th>
                <th>Dest.</th>
                <th>Alerts</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="truck in trucks" ng-click="summaryData(truck)" class="truck-list-body">
                <td>
                    <div><i class="fa fa-truck truck-icon"></i>{{truck.truckId}}</div>
                </td>
                <td>
                <span class="label {{truck.label}}">{{truck.status}}</span>
                </td>
                <td>{{truck.destination}}</td>
                <td>
                    <div><i class="fa fa-exclamation-triangle alert-icon"></i>{{truck.alerts}}</div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

从localhost 8080接收的json数据

{"truckId":"111","status":"Running","destination":"Winnipeg","alerts":"Nothing"}

Answer 1

您的服务功能不会返回任何内容。 return内的success也无效

自then以来使用success的简化服务版本已被弃用：

this.getTrucks = function() {
  console.log("before calling webservice");
  // return the promise created by `$http`
  return $http.get('http://localhost:8080/login/rest/truckservices/getTrucks?truckId')
    .then(function(responsePromise) {
      var trucks = responsePromise.data;
      console.log("after calling webservice my data is", trucks);
      return trucks;
    });

};

在控制器中

 fleetsService.getTrucks().then(function(truckData) {
   // assign data inside promise callback
   console.log("inside fleet service", truckData);
   $scope.trucks = truckData;

 });
 // can't do this one , it will run before data has been returned from server    
 console.log("outside fleet service", $scope.trucks);//will be undefined

将收到的服务文件中的Rest数据发送到控制器angularjs

1 个答案: