nach Winkel $ speichern und drücken, um Array-Element wird nicht hinzugefügt, es sei denn, ich eine Abfrage erneut ausführen

Question

Ich habe eine einzelne Seite App mit dem MEAN-Stack gebaut. Ich versuche eine Liste von Elementen zu erhalten, die aktualisiert werden sollen, nachdem ein neues Element in eckig hinzugefügt wurde, aber es funktioniert nicht.

Das funktioniert gut und gibt mein Array der Speicher zurück, die ich in der Ansicht anzeigen.

Ich habe dann ein Feld ein neues Array hinzuzufügen ... um den Code zu vereinfachen es wie folgt aussieht:

// create a new storage object from $scope.newStorage 
var storage = new Storages($scope.newStorage); 

ich verschiedene Dinge auf die Daten und schließlich ...

storage.$save(function(){ 

    $scope.storages.push(storage); // doesn't seem to do anything 
    console.log("new storage", storage); //shows up fine 
    $scope.newStorage = []; // clear textbox 
    $scope.showHide.addItemPanel = false; // hides the newStorage form 
    return $scope.storages; 
}); 

dann tun

Es scheint wie $scope.storages.push(storage) tut nichts.

Wenn ich diesen Code am Ende:

$scope.storages = Storages.query(); 
return $scope.storages; 

Dann funktioniert es. Aber ich möchte nicht jedes Mal alle Daten vom Server abrufen müssen. Wie kann ich das lösen und warum funktioniert das nicht?

Wenn ich console.log(JSON.stringify($scope.storages)) es wie folgt aussieht:

[{"_id":"XXXXXXXXXXXXXXX","_title":"XXXXXXXXX","__v":0,"files":[],"comments":[],"fields":[{"0":{"Title":"XXXXXXXXXXXXX"},"1":{"Category":"coding"},"2":{"Details":"XXXXXXXXX 

Vielen Dank im Voraus! Lesen

Answer 1

die Kommentare unterhalb

storage.$save(function(){ 

    //storage is promise here, not a Storage object you expect 
    $scope.storages.push(storage); 

    //because console.log binds to reference 
    //so after promise resolves, value on reference is changed 
    console.log("new storage", storage); //shows up fine 

    //not required at all 
    return $scope.storages; 
}); 

Einfache Lösung

//bind this to $scope 
var storage = new Storages($scope.newStorage); 

//like this 
$scope.storage = new Storages($scope.newStorage); 
//so Resource.$save is promise, when it completes, it will trigger digest 
//and your array will be populated 
$scope.storage.$save(); 
$scope.newStorage = []; 
$scope.showHide.addItemPanel = false; 
$scope.storages.push($scope.storage); 

Bessere Lösung

//$save accepts callback 
storage.$save(function(newStorageFromServer){ 

    //newStorageFromServer is not promise, but actual result from server 
    //which is Storage instance by default 
    $scope.storages.push(newStorageFromServer); 

    //other staff 
    $scope.newStorage = []; // clear textbox 
    $scope.showHide.addItemPanel = false; // hides the newStorage form 

    //return statement is useless 
});