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)

InformationsquelleAutor James Davies | 2013-06-02
  1. 8

    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):

    > $('body.ng-scope').data('$scope').single
Object {then: function, $$v: Object}
$$v: Object
then: function (b,g){var j=e(),h=
__proto__: Object

    Während direct ist ein Objekt:

    > $('body.ng-scope').data('$scope').direct
Object {name: "Bill Gates", $$hashKey: "004"}

    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:

    > $('body.ng-scope').data('$scope').single.name
""

    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:

    //Bind ap romise to the scope that will return a single person record. This is *not* editable.
  deferSingle.promise.then(function(data) {
      $scope.single = data;  
  }, function(data) {
      //error
  });

    Hier ist die plunker: http://run.plnkr.co/plunks/rDo7bFZlBq4rRH2ZNJn1/

    • oops, ich hab dein edit, nachdem ich gepostet meine Antwort. Ich bin nicht sicher, ob es eine AngularJS-bug.
    • Danke. Ich bin mir nicht 100% sicher über die verbindliche Sache unterstützt - aber es funktioniert richtig, in fast allen Fällen, und es gibt spezifische code in parse.js Griff Auspacken $$v.
    • Offensichtlich ist die direkte Bindung funktioniert, jedoch ist die Sache besonders zu beachten ist, dass das Versprechen der Rückgabe ein Array funktioniert, aber das Versprechen der Rückkehr ein Wörterbuch nicht. Die direkte Bindung war einfach Hinzugefügt als Kontrolle.
    • James, es gibt ein Problem offen auf GitHub finden Sie den link in die Antwort.
    • Ich aktualisiert, der link zum richtigen Thema in der Antwort.
    • Nach ein bisschen mehr Untersuchung scheint es, dass 1.0.2 ist noch nicht so funktioniert, wie ich erwartet hätte - Das Feld ist editierbar, aber es ist immer noch nur die Bindung an das root-Objekt, nicht $$v in das Versprechen. Ich vermute, das ist einfach ein nicht unterstütztes feature.
    • Ich war noch am laufen in dieses Problem mit 1.1.5. Wechsel auf 1.2 rc das problem behoben. $scope-Objekte zurückgegeben, die mit einem Versprechen, sind vollständig editierbar als ngModels und wird als form-Daten korrekt.
    • redet Ihr TypeError: Cannot assign auf "nur Lesen" - Eigenschaft 'etwas' von #<Object> ?? Oder ich bin irgendwo anders?

    InformationsquelleAutor David Riccitelli
Schreibe einen Kommentar