错误:消息。$ delete不是函数

时间:2016-09-16 17:03:35

标签: javascript angularjs angular-resource

我正在尝试使用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中的调试器选项'选择监视表达式'似乎没有显示任何异常,因为列出了对象数据。请帮忙!

1 个答案:

答案 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);
            }
        });
    }