AngularJS - ng-Modell nicht auf contenteditable <span>

Ich Lerne AngularJS. Ich bin gekommen, über etwas das ich nicht erklären kann, noch kann ich keine Erklärung für (oder Lösung).

Ich habe ein einfaches AngularJS-app und ich bin versucht zu binden eine <span contenteditable="true"> auf einen Wert, aber es funktioniert nicht. EG:

<!-- Works as expected -->
<input data-ng-model="chunk.value"></input>

<!-- Shows value, but doesn't bind - changes not reflected in model -->
<span contenteditable="true">{{chunk.value}}</span>

<!-- This is empty -->
<span contenteditable="true" data-ng-model="chunk.value"></span>

Wie kann ich den letzten span die Verwendung von 2-Wege-Bindung, so dass die Bearbeitung Ihren Wert chunk updates.Wert-und Umgekehrt?

InformationsquelleAutor der Frage Alex McMillan | 2014-05-07

  1. 21

    ng-bind! Verwendung ng-bind für one-way-binding in 'span'.

    Bitte hier für ein Beispiel: https://docs.angularjs.org/api/ng/directive/ngBind

    Damit deine line wäre:
    <span contenteditable="true" ng-bind="chunk.value"></span>

    Hoffe, dass dies helfen

    InformationsquelleAutor der Antwort Siti Farah

  2. 0

    Den ngModel wird nicht funktionieren, da @VtoCorleone hingewiesen. ngModel docs

    The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

    Können Sie einen Blick auf die contenteditable Richtlinie.

    Sonst, Potenzial Abhilfe: eine Funktion, die aufgerufen wird. Diese Funktion aktualisiert die $scope.chunk.value innerhalb Ihrer Steuerung. Und es würde kümmern uns um den anderen Elementen, den Inhalt als die Bindung wird aktualisiert.

    Ich bin mir nicht sicher das genaue Aussehen oder die Funktionalität, die Sie für gehen, sondern einfach nur legte es in eine <textarea> und Stil es sich wie ein <span> (kein Rahmen oder hintergrund, etc). Dann, wenn es in focus fügen Sie zusätzliche styling zu wissen, dass es bearbeitet werden kann. Auf diese Weise ermöglicht die Verwendung der ng-model wie es verwendet werden soll. Hier ist eine einfache Implementierung dieses Ansatzes: Plunker

    InformationsquelleAutor der Antwort EnigmaRM

  3. 0

    ng-model ist, soll nicht verwendet werden span. Wenn Sie unbedingt brauchen, schreiben Sie eine benutzerdefinierte Richtlinie für das. Diese Richtlinie wird einen keydown,keyup Hörer auf die contentEditable span und Aktualisierung der Oszilloskop-Modell (innerhalb $apply()). Diese binden span-Inhalt-Modell.

    Habe ich schnell erstellt, ein plunker für Sie. Überprüfen Sie es heraus. Es synchronisiert die <span> Inhalt, Umfang Modell. Öffnen der browser-Konsole zu sehen, das scope-Modell aktualisieren, Wann immer Sie etwas.

    InformationsquelleAutor der Antwort Sandeep Panda

  4. 0

    Durch hinzufügen ng-model-options="{ getterSetter: true }" Verhalten zu einem element, hat ng-model befestigt, um es. Sie können auch hinzufügen ng-model-options="{ getterSetter: true }" zu einem <form>die es ermöglichen, dieses Verhalten für alle <input>s.

    Beispiel zeigt, wie ngModel mit einem getter/setter:
    demo-Seite

    InformationsquelleAutor der Antwort Prabhakaran S

Schreibe einen Kommentar