Angular - ngResource 破坏了数据绑定

Question

我是 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]，但是 none 的架构键

我一定是做错了什么，但我正在看这个教程

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)

Answer 1

您从 $resource 获得承诺，而不是从您的数据库获得 "result"。结果在承诺中。所以试试这个

var chapters = Chapter.query();

$scope.myFunction = function() {
    chapters.then(function(data) {
       console.log(data);
    });
}

我必须承认，我对 ngResource 不是很熟悉，所以 Jessie Carters 是对的，正确的语法是：

chapters.get({...}, function callback() {...})

Answer 2

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

在使用 $resource 时，我更喜欢使用 API 附带的 success/error 处理程序，而不是直接处理 promise。重要的是要认识到，仅仅因为您调用了查询并不意味着结果立即可用。因此，根据您的后端 returns 处理 success/error 的回调的使用。只有这样你才能绑定和更新 UI.

中的 reuslt

此外，在我们讨论它时，我注意到您没有在 $resouce URL 中连接可选参数。 $resource 接受第二个参数，它是一个为你的路线的 /:id 部分提供映射的对象。

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

这个表示法的意思是你将一个对象传递给 $resource，它有一个名为 id 的属性，它将被替换到你的 URL.

所以这个：

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

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

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

Angular - ngResource 破坏了数据绑定

Angular - ngResource breaks data binding

javascript

angularjs

ngresource