AngularJS - ng:Modell - Feld ist readonly, wenn gebunden $q-Versprechen?
Ich bin versucht, wieder einen einzelnen Datensatz aus einem Versprechen in AngularJs (1.0.7) und binden Sie das Ergebnis auf einem Formular. Die form bindet richtig, aber die Eingabefelder sind nur-Lesen - - ich kann nicht Bearbeiten Sie die Werte.
Wenn ich stattdessen wickeln Sie den Datensatz in ein Array und Durchlaufen mit ng:repeat, form bindet korrekt und ich Werte Bearbeiten können.
Habe ich einen plnkr, das veranschaulicht das Problem deutlich:
http://embed.plnkr.co/fOWyhVUfekRbKUSRf7ut/preview
Bearbeiten können Sie die direkt gebunden und Liste gebunden input-Felder, aber das Feld gebunden an die einzelnen Versprechen können nicht bearbeitet werden.
Ist es möglich, zu binden ng:Modell direkt auf ein Objekt zurückgegeben, von einem Versprechen, oder brauche ich, um ein array zu verwenden, diese zu arbeiten?
app.controller('MainCtrl', function($scope, $timeout, $q) {
var person = {"name": "Bill Gates"}
var deferList = $q.defer();
var deferSingle = $q.defer();
//Bind the person object directly to the scope. This is editable.
$scope.direct = person;
//Bind a promise to the scope that will return a list of people. This is editable.
$scope.list = deferList.promise;
//Bind ap romise to the scope that will return a single person record. This is *not* editable.
$scope.single = deferSingle.promise;
//Resolve the promises
$timeout( function(){
deferList.resolve( [person] ); //Array
deferSingle.resolve( person ); //Just the record itself
}, 100);
});
<body ng-controller="MainCtrl">
Directly Bound - This field is editable
<input ng:model="direct.name"/>
<hr/>
Singleton Promise - This field is *not* editable.
<input ng:model="single.name"/>
<hr/>
List Promise: - This field is editable
<div ng:repeat="person in list">
<input ng:model="person.name"/>
</div>
</body>
Bearbeiten: Nach einigem Debuggen habe ich herausgefunden, dass die ng:Modell-Richtlinie ist Lesen aus dem Wert ('$$v') - Komponente von dem Versprechen, aber schriftlich direkt an das Versprechen, das Objekt selbst.
Beim Versuch, Bearbeiten Sie die Versprechen, die ViewModel hält, wird wieder auf den ursprünglichen Wert, während die Speicherung von Zeichen, die auf das Versprechen selbst. Wenn daher die Benutzer-Typen "asdf" in das Eingabefeld, das Ergebnis wäre das folgende.
{Name: "Asdf", $$v: {Name: "Bill Gates"}}
; Wir sollten stattdessen erwarten
{$$v: {Name: "asdf"}}
Mache ich etwas falsch, oder ist das möglicherweise ein bug in AngularJS?
(Weiter zu erklären, das Problem ist der Unterschied im Verhalten zwischen einem Array und ein Objekt zurückgegeben, indem Sie ein Versprechen. Die direkte Bindung ist einfach da, wie ein Steuerelement)
- Ich fand das Problem und erstellt einen pull-request. github.com/angular/angular.js/pull/2854
Du musst angemeldet sein, um einen Kommentar abzugeben.
UPDATE
Scheint, dass das Problem wurde eingeführt mit AngularJS 1.0.3:
http://jsfiddle.net/sonicsage/k8W4Y/6/
Wenn Sie wechseln Sie zu AngularJS 1.0.2, dann funktioniert es.
Es ist ein offenes issue auf GitHub: https://github.com/angular/angular.js/issues/1827
Den original-thread auf Google Groups.
Gibt es auch einen interessanten thread über automatisches unwrapping hier:
https://github.com/angular/angular.js/pull/1676
Durch das Debuggen der Anwendung im Chrome-Konsole können Sie sehen, dass
single
ist eine Funktion (das Versprechen):Während
direct
ist ein Objekt:Jedoch, durch drücken der Tasten auf der nur-lese-Eingang hat einen Effekt auf die
promise
zum Beispiel der Auswahl der text und löschen es, hat zwar keinen Einfluss auf die UI, hat einen Effekt auf die Eigenschaft:Kann man weiter Debuggen Sie die app hier: http://run.plnkr.co/plunks/rDo7bFZlBq4rRH2ZNJn1/
BEARBEITEN
IMO direkt verbindlich, ein Versprechen auf ein Feld wird nicht unterstützt (ist das offiziell dokumentiert?), ändern Sie den code wie folgt funktioniert:
Hier ist die plunker: http://run.plnkr.co/plunks/rDo7bFZlBq4rRH2ZNJn1/