Come utilizzare i metodi onBeforeSave/onAfterSave di Angular-Xeditable con più di $ data come parametro

Question

Quando ho utilizzato per la prima volta Angular-Xeditable con la mia applicazione, mi sono imbattuto in un problema cercando di capire come salvare una modifica x modificabile in un oggetto a cui si accede attraverso un ciclo di ripetizione ng.

La documentazione si concentra principalmente sull'uso di onbeforesave e onaftersave per la convalida e, mentre mostra che può essere utilizzato per salvare le cose, gli esempi non mostrano come passare qualcosa di più di $ data (o $ index) a il tuo metodo onbeforesave/onaftersave. Gli esempi mostrano come salvare qualcosa come $ scope.person, che va bene se hai un oggetto.

Ma cosa succede se la terza persona in una lista di 30 è stata modificata? Certamente non vuoi doverli salvare tutti. Come si salva solo l'oggetto che è stato modificato invece di tutto nell'array?

Answer 1

I documenti Angular-Xeditable non lo rendono abbastanza chiaro, ma sembra che i dati $ (e $ indice) siano solo valori iniettati e che sia possibile passare praticamente tutto ciò che si desidera ai metodi di salvataggio/convalida. Quindi quello che dovresti fare è passare l'oggetto stesso (o forse solo il suo id).

Dato il seguente markup:

<div ng-repeat="p in people"> 
    <a href="#" editable-text="p.name" onaftersave="updatePerson(p)">{{p.name}}</a> 
</div> 

Farebbe quindi hanno il seguente codice nel controller:

$scope.updatePerson = function(person) { 
    var ret = PersonService.save(person); // or whatever save mechanism you use 
    // You need to return a error string if save fails, true otherwise 
    if (ret !== null) { // You have to make sure this logic works for your save service 
     return ret; 
    } 
    return true; 
} 

Con questo, si può quindi gestire il salvataggio qualsiasi modo tu voglia. Non sei obbligato a utilizzare solo i valori $ o $ di indici forniti da Angular-Xeditable. Si potrebbe altrettanto facilmente fare qualcosa di simile:

<div ng-repeat="p in people"> 
    <a href="#" editable-text="p.name" onaftersave="updatePerson(p.id, p.name, p.dohickey)">{{p.name}}</a> 
</div> 

E aggiornare solo il nome e dohickey campi per la persona con il valore ID in dotazione. Ovviamente, dovresti cambiare il metodo updatePerson() per aspettarti invece un ID come primo param e il nome e dohickey come 2nd e 3rd params.

Si noti inoltre che se si utilizza onBeforeSave anziché onAfterSave come ho fatto qui, p.name non avrà ancora il nuovo valore e sarà necessario tornare a utilizzare $ data per ottenere il nuovo valore.