ngResource get()似乎没有检索任何数据

时间:2015-07-17 21:47:46

标签: javascript angularjs angularjs-ng-resource

角度代码与html一起在下面。问题是端点' / contacts /:id'在Postman和Chrome中返回json。显然我交换:id为0037000001pIldUAAS用于那些测试,但端点似乎很好。页面加载后#39; {}'就是我进入$ scope.data的全部内容。我到底是做错了什么?我提供的示例几乎是逐字逐句get()的角度文档中的内容。我已经验证了我从后端获得的json是有效的。

有人看到看起来乱序的东西吗?



var app = angular.module('app', ['ngResource']);

app.factory('Contact', ['$resource', function($resource) {
    return $resource('http://localhost:3000/contacts/:id');
}]);

app.controller('ContactCtrl', ['$scope', 'Contact',
    function($scope, Contact) {

        $scope.data = Contact.get({id:'0037000001pIldUAAS'});

    }]);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script src="angular.min.js"></script>
    <script src="angular-resource.js"></script>
    <script src="test.js"></script>

</head>

<div ng-app="app">
    <div ng-controller="ContactCtrl">

        {{data}}

        <h5>Is angular working: {{working}}</h5>

        <input ng-model="working"/>

    </div>
</div>

</body>
</html>
&#13;
&#13;
&#13;

这里是api返回的json片段:

&#13;
&#13;
{
  "Id": "0037000001elHP3AAM",
  "LastName": "first",
  "FirstName": "last"
...
}
&#13;
&#13;
&#13;

**编辑:添加了Chrome开发者工具截图:

enter image description here enter image description here

1 个答案:

答案 0 :(得分:0)

您错过了$ resource资源构建的重要部分。第二个参数是一个对象,它指定路径参数的绑定

app.factory('Contact', ['$resource', function($resource) {
    return $resource('http://localhost:3000/contacts/:id', {
        id: '@id'
    });
}]);

这意味着当你向get请求提供一个对象时,angular将在该对象上查找一个名为id的属性,然后将其转入到其中:id为的路由中。如果您不这样做,您对象中的所有属性都将作为查询参数发送。您可以通过在浏览器中打开开发工具并转到网络请求部分来验证这一点。我愿意打赌你发现的网络请求看起来像这样:

http://localhost:3000/contacts?id=0037000001pIldUAAS