Elementy znikają po zapisaniu

Question

Utworzono dyrektywę do wyświetlania danych. Mogę uwzględnić to w powtórzeniu ng i zobaczyć, że model jest podłączony. Po kliknięciu i zwróceniu strony dane są wyświetlane ponownie z wcześniej wprowadzonymi zmianami. Użyłem ngResources do załadowania danych z API. Do tej pory, tak dobrze: działa zgodnie z oczekiwaniami.

Oto część, która się psuje: jeśli zapisuję dane w API w mojej dyrektywie, element znika z tej strony (dokładniej, jest narysowany z pustymi polami). Reszta przedmiotów pozostaje jak poprzednio. Tylko zapisany zmienia się.

Oto dyrektywy:

.directive('action', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      data:'=model' 
     }, 
     templateUrl: 'modules/actions/view.tpl.html', 
     replace: true, 
     link: function(scope, element, attr) { 
      scope.save = function() { 
       console.log(" data to save:" + JSON.stringify(scope.data)); 
       scope.data.$save(); 
      } 
     } 
    }; 
}) 

HTML związane z dyrektywą obejmuje:

<p><input type="text" ng-model="data.assignee" ng-change="save()"> 

Oto jak stosować dyrektywy:

<div ng-repeat="item in data"> 
    <action model="item" /> 
</div> 

Oto fiddle który pokazuje dodatkowy kontekst . Możesz zobaczyć podstawową dyrektywę działającą z fałszywymi danymi. Kod wywołania API został skomentowany.

Ponownie, problem występuje, gdy linia scope.data.$save(); jest odkomentowana. Gdy element wyświetlany w powtórzeniu ng próbuje się zapisać, znika z wyświetlanej listy elementów, zastępując je pustymi polami. Po ponownym załadowaniu całej aplikacji widzę, że zapisywanie interfejsu API powiodło się, a element jest teraz wyświetlany poprawnie.

Podejrzewam, że dzieje się tak, że wywołanie zapisu działa na prawidłowym elemencie, ale w jakiś sposób zastępuje zmieniony element nowym, pustym, prawdopodobnie z powodu prototypowego dziedziczenia. Zapis powoduje następnie aktualizację zakresu nadrzędnego, który przerysowuje listę i pokazuje nowy, wygaszony element.

Czy ktoś może wyjaśnić, co się dzieje i jak to naprawić?

Answer 1

Myślę, że przekonasz się, że odpowiedź HTTP na twoją komendę $save() zwraca puste dane.

Tak działa $resource. Po wywołaniu $save(), (domyślnie) wywoła usługę REST za pomocą POST protokołu HTTP. Oczekuje się, że odpowiedź będzie stanem serwera zasobu. Wynik jest następnie kopiowany do obiektu. W tym przypadku, zgaduję, że twoja usługa REST zwraca pusty obiekt.

Innymi słowy, jeśli wyślesz POST z treścią {name: 'foo'}, możesz oczekiwać, że odpowiedź z serwera będzie wyglądać jak na przykład {id: 44, name: 'foo', extraInfoServerCreated: 'bar'}.