javascript - Angular-ngResource中断数据绑定(bind)

我是Angular的新手，并且试图与ngResource保持同步。

我在chapter.service.js文件中创建了一个工厂

angular.module('myApp')
.factory('Chapter', function ($resource) {
  return $resource('/api/book/chapter/:id'); // Note the full endpoint address
});

matchescontroller.js

angular.module('myApp').controller('matchesCtrl', function($scope, $location, Chapter) {

// This is used to get URL parameters

$scope.url = $location.path();
$scope.paths = $scope.url.split('/');
$scope.id = $scope.paths[2];
$scope.action = $scope.paths[3];

//Trying to call the test data
    var chapters = Chapter.query();

    $scope.myFunction = function() {
        alert(chapters.length);
    }

我在哪里测试功能

<button ng-click="myFunction()">Click Here</button>

我创建了一个测试函数来测试查询是否返回了任何结果。当我单击按钮时，系统会提示我0，这表示查询无效。

当我将功能更改为

$scope.myFunction = function() {
    console.log(Object.keys(chapters));
}

我得到[$promise, $resolve]，但是没有任何Schema键

我一定做错了，但我在看本教程

http://www.masnun.com/2013/08/28/rest-access-in-angularjs-using-ngresource.html

任何帮助将不胜感激。

编辑：这是我从服务器获得的响应

GET http://localhost:9000/api/book/chapter/1 500 (Internal Server Error)

最佳答案

$scope.myFunction = function() {
    Chapter.query({}, function(data) {
        $scope.chapters = data;
    }, function(error) {
        // custom error code
    });
}

当使用$ resource时，我更喜欢使用API​​附带的成功/错误处理程序，而不是直接处理promise。要意识到的重要一点是，仅仅因为您调用了查询并不意味着结果立即可用。因此，根据后端返回的内容，使用用于处理成功/错误的回调。只有这样，您才能在UI中绑定和更新重用。

另外，当我们谈论它时，我注意到您没有在$ resouce URL中连接可选参数。 $ resource具有第二个参数，该参数是为路由的/:id部分提供映射的对象。

return $resource('/api/book/chapter/:id', {id: '@id'});

这种表示法的意思是，您将一个具有名为id的属性的对象传递给$ resource，该对象将被归并到您的URL中。

所以这：

$scope.item = {id: 42, someProp: "something"};

Chapter.get({$scope.item}....

将导致看起来像'/api/book/chapter/42'的API调用