AngularJS und contentEditable Zwei-Wege-Bindung funktioniert nicht wie erwartet
Warum im folgenden Beispiel werden die ersten gerenderten Wert ist {{ person.name }}
eher als David
? Wie würden Sie dieses Problem beheben?
HTML:
<body ng-controller="MyCtrl">
<div contenteditable="true" ng-model="person.name">{{ person.name }}</div>
<pre ng-bind="person.name"></pre>
</body>
JS:
app.controller('MyCtrl', function($scope) {
$scope.person = {name: 'David'};
});
app.directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
//view -> model
element.bind('blur', function() {
scope.$apply(function() {
ctrl.$setViewValue(element.html());
});
});
//model -> view
ctrl.$render = function() {
element.html(ctrl.$viewValue);
};
//load init value from DOM
ctrl.$setViewValue(element.html());
}
};
});
InformationsquelleAutor der Frage Misha Moroshko | 2013-01-28
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem ist, das Sie aktualisieren die Ansicht Wert, wenn Sie die interpolation ist noch nicht fertig.
So entfernen
oder ersetzen Sie es mit
werden das Problem beheben.
InformationsquelleAutor der Antwort asgoth
Kurze Antwort
Du bist der Initialisierung des Modells aus der DOM mit dieser Zeile:
Sie offensichtlich nicht brauchen, um ihn zu initialisieren aus dem DOM, denn Sie sind der Wert in der Steuerung. Entfernen Sie einfach diese Initialisierung Linie.
Lange Antwort (und wahrscheinlich die andere Frage)
Dies ist eigentlich ein bekanntes Problem: https://github.com/angular/angular.js/issues/528
Sehen, eine offizielle docs Beispiel hier
Html:
JavaScript:
Plunkr
InformationsquelleAutor der Antwort Vanuan
Hier ist mein Verständnis von Benutzerdefinierten Richtlinien.
Den code unten grundlegenden überblick über die zwei-Wege-Bindung.
können Sie sehen, es funktioniert auch hier.
http://plnkr.co/edit/8dhZw5W1JyPFUiY7sXjo
Hoffe, es hilft jemand da draußen.!!
InformationsquelleAutor der Antwort Vikas Gautam
Überprüfen Sie diese angularjs Richtlinie
https://github.com/clofus/angular-inputnlabel
http://clofus.com/viewarticles/109
InformationsquelleAutor der Antwort Karthik Balu
Kann es zu Problemen mit @Vanaun - code, wenn ein scope.$Bewerbung ist bereits in Arbeit. In diesem Fall verwende ich $timeout statt, die das Problem behebt:
Html:
JavaScript:
Beispiel: Plunkr
InformationsquelleAutor der Antwort William Hampshire