Kopieren nach Wert in Angular funktioniert nicht richtig

Ich versuche, eine einfache bearbeitbare Div-Seite zu erstellen, wo Sie den Inhalt bearbeiten, abbrechen und speichern können. Wenn Sie auf "Bearbeiten" klicken, wird das div für die korrekte Bearbeitung aktiviert. Wenn ich jedoch speichere, wird der Wert nicht mit dem Wert synchronisiert, der eingegeben wurde. Außerdem, wenn Sie abbrechen und zu dem zurückkehren müssen, was vorher war, wird der richtige Wert nicht gezogen.Kopieren nach Wert in Angular funktioniert nicht richtig

Ich habe versucht, den vorherigen Inhalt vorübergehend zu speichern, indem ich den aktuellen Wert mit und leerem String verkette, um zu verhindern, dass ein Verweis kopiert wird, aber ich sehe nicht, wo ich mich verpfeife.

Ich habe ein einfaches Beispiel erstellt demonstrieren: http://play.ionic.io/app/76fa89478b4c

Quelle

2016-06-18 Tyler Murry

Angular nicht 'selbst contenteditable' nicht unterstützt. Suche * "angular contenteditable" * für Lösungen. All dies wird komplizierter als nötig. Verwenden Sie Objekte und 'angular.extend()' und 'angular.copy()', um zu vereinfachen – charlietfl

Es ist, weil Inhalt editierbar ist nicht vollständig mit Winkeln arbeiten.

ersetzen Sie die div mit contenteditable von:

<input ng-model="contents" ng-disabled="!editingContents"/>

Ihre html wie das geworden:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
    </head> 
    <body ng-app="app" ng-controller="TestController"> 
    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Awesome App</h1> 
     </ion-header-bar> 
     <ion-content class="padding"> 
     <input ng-model="contents" ng-disabled="!editingContents"/> 
     <br/> 
     <button class="button button-dark" ng-click="edit()">edit</button> 
     <button class="button button-dark" ng-click="cancel()">cancel</button> 
     <button class="button button-dark" ng-click="save()">save</button> 
     </ion-content> 
    </ion-pane> 
    </body> 
</html>

Quelle

2016-06-18 17:51:18

Wie Sie sich entgingen, endete das ultimative Problem mit der Art und Weise, kantige Zwei-Wege-Bindung zufrieden stellende Elemente zu behandeln. Aufgrund der Art, wie meine Anwendung geschrieben wurde, war es nicht wünschenswert, ein Eingabefeld zu verwenden. Mit Hilfe des folgenden Artikels habe ich eine benutzerdefinierte Anweisung geschrieben, um die fehlende Unterstützung von angular zu kompensieren: http://mehrrantm.blogspot.com/2013/10/how-make-two-way-binding-to-your.html das hat super für mich funktioniert. –

Kopieren nach Wert in Angular funktioniert nicht richtig

Antwort

Verwandte Themen