0

角度代码与 html 一起在下面。问题是端点“/contacts/:id”在 Postman 和 Chrome 中返回 json。显然，我将 :id 与 0037000001pIldUAAS 交换用于这些测试，但端点似乎很好。当页面加载时，'{}' 就是我在 $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>

这是 api 返回的 json 片段：

{
  "Id": "0037000001elHP3AAM",
  "LastName": "first",
  "FirstName": "last"
...
}

**编辑：添加 Chrome 开发工具截图：

在此处输入图像描述 在此处输入图像描述

4

1 回答 1

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
于 2015-07-17T21:51:08.223 回答