Question

我正在使用Nodejs和AngularJS，我在从生成的JSON文件中填充前端的表时遇到问题。

我有以下ejs文件：

<% include layout %>

<div class="panel panel-info">
<div class="panel-heading">
    <h3 class= "panel-title"> <%=title %></h3>

</div>

<br>

<div
        data-ng-app="projectionsModule"
        data-ng-controller="projectionsController">

<div class="container">
    <%include projectionsGrid%>
</div>

</div>


<script src="/bower_components/angular/angular.min.js"></script>
<script src="../../javascripts/app/projections/projectionsModule.js">       </script>
<script src="../../javascripts/app/projections/projectionsService.js"></script>
<script src="../../javascripts/app/projections/projectionsController.js"></script>

和projectionGrid.ejs如下：

<table
      data-ng-show="projections.length > 0"
      class='table table-striped table-hover'
>

    <tr class="success">
    <td>Name</td>
    <td>Age</td>
    </tr>

    <tr data-ng-repeat="projection in projections">
    <td>{{projection.Name}}</td>
    <td>{{projection.Age}}</td> 
    </tr>
</table>

控制器如下：

angular.module("projectionsModule")
.controller("projectionsController", projectionsController);

projectionsController.$inject = ['$scope', 'projectionsService'];

function projectionsController($scope, projectionsService) {

  //  $scope.projections = [];


    getAllProjections();


    function getAllProjections() {
        projectionsService.getAllProjections().
            success(function (response) {
                $scope.projections = response.projections;
                alert(response.projections);
               // console.log(response.projections[0]);

            })
    }
}

和服务：

angular.module("projectionsModule")
.factory("projectionsService", projectionsService);

projectionsService.$inject = ['$http'];

function projectionsService($http) {

    return {

        getAllProjections : function () {
            return $http.get('/getAllProjections');
        }
    };
}

似乎

projectionsService.getAllProjections().
            success(function (response) {
                $scope.projections = response.projections;

不起作用。在带有Inspect的浏览器中，所有文件都已正确加载。

json文件如下：

{
      "projections": [
        {
          "name": "Alex",
          "age": "18"
        }
      ]
    }

我运行时获得的打印屏幕：

enter image description here

有人可以帮助我，因为我真的不知道还能做什么。

谢谢。

打印屏幕显示错误：

enter image description here

Answer 1

请参阅related plunker。

你使用的是错误的承诺。如果您需要解释，请在评论中提问我。

// Mandatory code for plunkr link

在您的情况下，只需进行$http调用并删除超时，而不是返回对象。我会让你这样做，但如果你需要帮助，请随时问。

在评论后编辑您忘记将$http包含为依赖项。您也可以使用$http.get，这更快，（至少对我来说）更容易理解（see the documentation here）

angular.module("projectionsModule")
    .factory("projectionsService", function($q, $http) { 
        return { 
            projectionFunction: projectionFunction 
        } 

        function projectionFunction() { 
            return $http.get('127.0.0.1:1337/getAllProjections', {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            });
        }
    });

使用解决方案进行编辑您需要使用$q来使用promises。看一看，你会经常使用你的http请求。你的功能应如下所示：

angular.module("projectionsModule")
    .factory("projectionsService", function($q, $http) { 
        return { 
            projectionFunction: projectionFunction 
        } 

        function projectionFunction() { 
            var defer = $q.defer();

            $http.get('127.0.0.1:1337/getAllProjections', {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function(success) {
                defer.resolve(success);
            }, function(error) {
                defer.reject(error);
            });

            return defer.promise;
        }
    });

在您的控制器中，您可以执行以下操作：

function getAllProjections() {
    projectionsService.projectionFunction().then(function(success) {
        $scope.projections = success.data.projections;
        // do an alert(success) to see what is in it !
    }, function(error) {
        alert(error.data);
    });
}

NodeJS + AngularJS $ http获取

1 个答案: