我正在尝试使用angular-resource服务发送DELETE请求,但我在开发工具中不断收到以下消息:
错误:消息。$ delete不是函数 $scope.deleteMessage@file:///Users/me/Desktop/angular/my-app/loyalty-program_messages-pointstransactions.js:37:13 anonymous / fn @ file:///Users/me/Desktop/angular/my-app/angularjs/angular.js line 14605>功能:2:329 expensiveCheckFn @文件:///Users/me/Desktop/angular/my-app/angularjs/angular.js:15694:18 ngEventHandler / HTTPS://code.jquery.com/jquery-1.12.4.min.js:3:12392 n.event.add / r.handle @ https://code.jquery.com/jquery-1.12.4.min.js:3:9156
我注意到这里缺少角度资源。有这个原因吗?
这是带控制器的模块:
var myApp = angular.module('myApp', ['ngResource'])
.constant("baseUrl1", MY-TESTING-URL-1)
.config(function($httpProvider) {
$httpProvider.defaults.withCredentials = true;
})
myApp.controller("MessagesCtrl", function($scope, $http, $resource, baseUrl1){
$scope.displayMode = "list";
$scope.currentMessages = null;
$scope.messagesResource = $resource(MY-TESTING-URL-1 + ":id?projection=full", { id: "@id" });
$scope.listMessages = function () {
$scope.foo = $scope.messagesResource.get();
$scope.foo.$promise.then(function (data) {
$scope.messages = [];
for(var i = 0; i < $scope.foo._embedded.messages.length; i++) {
var obj = $scope.foo._embedded.messages[i];
$scope.messages.push(obj);
}
});
}
$scope.deleteMessage = function (message) {
message.$delete().then(function () {
$scope.messages.splice($scope.messages.indexOf(message), 1);
});
$scope.displayMode = "list";
}
$scope.createMessage = function (message) {
new $scope.messagesResource(message).$save().then(function(newMessage) {
$scope.messages.push(newMessage);
$scope.displayMode = "list";
});
}
$scope.updateMessage = function (message) {
message.$save();
$scope.displayMode = "list";
}
$scope.editOrCreateMessage = function (message) {
$scope.currentMessage = message ? message : {};
$scope.displayMode = "edit";
}
$scope.saveEdit = function (message) {
if (angular.isDefined(message.id)) {
$scope.updateMessage(message);
} else {
$scope.createMessage(message);
}
}
$scope.cancelEdit = function () {
if ($scope.currentMessage && $scope.currentMessage.$get) {
$scope.currentMessage.$get();
}
$scope.currentMessage = {};
$scope.displayMode = "list";
}
$scope.listMessages();
});
这是带有ng-click的视图,应该发送DELETE请求:
<div ng-repeat="message in messages">
<div class="data-tables read-{{ message.read }}">
<div class="data-tables-rows">
<div class="data-tables-toggle" type="button" data-toggle="collapse" data-target="#collapse_disclaimer_data-table_message-center_{{ $index }}" aria-expanded="false" aria-controls="collapse_disclaimer_data-table_message-center_{{ $index }}" title="View Details">
<label></label>
</div>
<div class="data-table-message hidden-xs" type="button" data-toggle="collapse" data-target="#collapse_disclaimer_data-table_message-center_{{ $index }}" aria-expanded="false" aria-controls="collapse_disclaimer_data-table_message-center_{{ $index }}" title="View Details">
<p style="white-space: nowrap; width: inherit; overflow: hidden;text-overflow: ellipsis;"><b>message</b><br />
{{ message.message }}
</p>
</div>
<div class="data-table-date" type="button" data-toggle="collapse" data-target="#collapse_disclaimer_data-table_message-center_{{ $index }}" aria-expanded="false" aria-controls="collapse_disclaimer_data-table_message-center_{{ $index }}" title="View Details">
<p><b>date</b><br />
<date>{{ message.dateReceived | date }}</date>
</p>
</div>
<div class="data-table-points hidden-xs points-{{ message.metadata }}" type="button" data-toggle="collapse" data-target="#collapse_disclaimer_data-table_message-center_{{ $index }}" aria-expanded="false" aria-controls="collapse_disclaimer_data-table_message-center_{{ $index }}" title="View Details">
<p><b>Points</b><br />
{{ message.metadata }}</p>
</div>
<div class="data-table-delete">
<button ng-click="deleteMessage(message)">Delete</button>
</div>
</div>
<div class="collapse" id="collapse_disclaimer_data-table_message-center_{{ $index }}">
<div class="data-tables-rows">
<div class="data-tables-spacer" style="visibility:hidden;">
<input id="data-table-icon" type="checkbox" />
<label for="data-table-icon"></label>
</div>
<div class="well">
<div class="data-table-message">
<p><b>Message</b><br />
{{ message.message }}</p>
</div>
<div class="data-table-points visible-xs">
<p><b>Points</b><br />
{{ message.metadata }}</p>
</div>
</div>
<div class="data-tables-spacer">
</div>
</div>
</div>
</div>
message
来自CDN服务的JSON:
{
"_embedded": {
"messages":
{
"id": 8,
"message": "You received points",
"dateReceived": "2016-08-01T00:00:00.000+0000",
"read": false,
"metadata": "50"
}
}
}
Firefox中的调试器选项'选择监视表达式'似乎没有显示任何异常,因为列出了对象数据。请帮忙!
答案 0 :(得分:1)
谢谢你Joaozito Polo,你帮我们搞清楚了。 var newMessage是资源中的新对象。这是新的listMessages函数:
$scope.listMessages = function () {
$scope.foo = $scope.messagesResource.get();
$scope.foo.$promise.then(function (data) {
$scope.messages = [];
for(var i = 0; i < $scope.foo._embedded.messages.length; i++) {
var obj = $scope.foo._embedded.messages[i];
var newMessage = new $scope.messagesResource(obj)
$scope.messages.push(newMessage);
}
});
}