Fehler:. Nachricht löschen $ ist keine Funktion

Question

Ich versuche, mit Hilfe der Winkel-Ressource-Dienst eine DELETE Anfrage zu senden, aber ich halte die folgende Meldung in dev Tools bekommen:

Error: message.$delete is not a function $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 > Function:2:329 expensiveCheckFn@file:///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

Ich bemerke dass die Angular-Ressource hier fehlt. Gibt es einen Grund dafür?

Dies ist das Modul mit der Steuerung:

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(); 
}); 

Dies ist die Ansicht mit der ng Sie auf, dass eine DELETE-Anfrage senden soll:

<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> 

Die message stammt aus CDN serviert JSON:

{ 

"_embedded": { 
    "messages": 
     { 
      "id": 8, 
      "message": "You received points", 
      "dateReceived": "2016-08-01T00:00:00.000+0000", 
      "read": false, 
      "metadata": "50" 
     } 
    } 
} 

Firefox in Debugger-Option "Auswahl zu beobachten Ausdruck" Es scheint nichts zu verraten, wenn die Objektdaten aufgelistet werden. Bitte helfen Sie!

Answer 1

Vielen Dank Joaozito Polo, Sie haben uns geholfen, es herauszufinden. var newMessage ist das neue Objekt von der Ressource. Hier ist die neue Funktion 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); 
      } 
     }); 
    }