无法使用从 AngularJS 工厂返回的数据

Question

我尝试使用 http 请求在 table 中显示一些信息。

为此，我创建了一个工厂，并在控制器中调用该工厂。当我验证（使用 FireBug）“$scope.showSal”是否有数据时，它告诉我它存在一个包含 4 个元素的数组（非常好）。

问题是屏幕上没有显示任何数据。

使用像 $scope.showSal = [{...}] 这样的简单赋值就可以了，但是当我使用工厂时就不行了。

有人可以帮我使用从工厂接收到的数据吗？

PS：为了测试，我使用特定数组 return 而不是 returning response.data（但即使我 return response.data 它具有相同的行为）

var app = angular.module("salariesApp", ['ui.bootstrap']);

app.factory('salServ', ['$http', function ($http) {
    var showSal = {};

    showSal.getItems = function () {
    return $http.get('http://localhost:8080/TT2/GetSalariesDetails')
            .then(
            function (response) {
                alert("OK");
                return [{ id: '1', an: '2016', den: 'Oracle Romania' },
                            { id: '2', an: '2016', den: 'Microsoft' },
                            { id: '3', an: '2016', den: 'Computer Generated Solutions - CGS Europe' },
                            { id: '4', an: '2016', den: 'IBM' }];
            },
            function (response) {
              alert("NO");
            }
          );
    };
    return showSal;
}]);

app.controller('mainCtrl', ['$scope', 'salServ', function($scope, salServ) {    
    $scope.showSal = salServ.getItems();
    console.log($scope.showSal);

    $scope.showItems = $scope.showSal;
}]);

HTML代码在这里：

<!DOCTYPE html>
<html>

  <head>
    <title>Research project</title>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js" data-semver="3.0.0" data-require="jquery@*"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" data-semver="1.5.7" data-require="angularjs@1.5.7"></script>
    <script data-require="ui-bootstrap-tpls-0.12.0.min.js@*" data-semver="0.12.1" src="https://raw.githubusercontent.com/angular-ui/bootstrap-bower/0.12.1/ui-bootstrap-tpls.min.js"></script>
    <script src="test.js"></script>
  </head>

  <body ng-controller="mainCtrl" ng-app="salariesApp">
    <table class="table">
      <thead>
        <tr>
          <th ng-click="sortBy(id)">Nr. crt.</th>
          <th ng-click="sortBy(an)">Anul</th>
          <th ng-click="sortBy('den')">Denumirea institutiei/companiei</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="tableSearch"></td>
          <td class="tableSearch">
            <input type="text" ng-value="{{crrYear}}" ng-model="searchSal.an" id="inputYear" class="form-control" />
          </td>
          <td class="tableSearch">
            <input type="text" ng-model="searchSal.den" id="inputName" class="form-control" />
          </td>
        </tr>
        <tr ng-repeat="rows in showItems">
          <td class="spa-col-md-1">{{rows.id}}</td>
          <td class="spa-col-md-2">{{rows.an}}</td>
          <td class="col-md-5">{{rows.den}}</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

Answer 1

不要相信 angular 中的 console.log 函数，因为控制台浏览器可以在加载后获取信息。请改用 $log :)

您可以根据您的范围值在 div 包含上添加 ng-if，例如：

<table class="table" ng-if="showItems">

仅当在 showItems

中收到项目时才会生成 table

Answer 2

$http.get() 是 异步的 而 returns 是 Promise。当您尝试设置 $scope.showItems 值时，HTTP 调用肯定没有完成。

尝试

var app = angular.module("salariesApp", ['ui.bootstrap']);

app.factory('salServ', ['$http', function ($http) {
    var showSal = {};

    showSal.getItems = function (callBack) {
        return $http.get('http://localhost:8080/TT2/GetSalariesDetails')
                .then(
                callBack (response.data),
                function (response) {
                    alert("NO");
                }
              );
    };
    return showSal;
}]);

app.controller('mainCtrl', ['$scope', 'salServ', function ($scope, salServ) {
    salServ.getItems(
        function (data) {
            $scope.showItems = data;
            console.log($scope.showItems);//or $log...
        }
    );
}]);

无法使用从 AngularJS 工厂返回的数据

Can't use returned data from AngularJS Factory

javascript

angularjs

angularjs-factory