2012-12-29 23 views
9

AngularJS docs say:AngularJS versprechen

$ q Versprechungen der Template-Engine in Winkel erkannt werden, die mit einem Umfang in Vorlagen können Sie verspricht behandeln angebracht bedeutet, dass, als ob sie die resultierenden Werte waren.

Also könnte jemand bitte erklären, warum diese fiddle nicht funktioniert? Es ist nicht möglich, den Textfeldwert zu ändern. Aber das Zuweisen von Versprechen, dass der $ http-Dienst zu einem Bereichsfeld zurückkehrt, funktioniert wie ein Zauber.

Controller:

function MyController($scope, $q, $timeout) { 
    this.getItem = function() { 
     var deferred = $q.defer(); 
     deferred.resolve({ 
      title: 'Some title' 
     }); 
     return deferred.promise; 
    }; 

    $scope.item = this.getItem(); 
} 

Html:

<input type="text" ng-model="item.title"> 
+0

Könnten Sie mir zeigen, wie Sie ein Versprechen von $ http zugewiesen, das wie gewünscht funktioniert? – Dogbert

+0

@Dogbert, Hier ist Pseudocode, um zu illustrieren, worüber ich sprach: '$ scope.item = $ http ({methode: 'post', url: '/ find/my/item /'}) . Funktion (Antwort) { return response.item; }); ' Ein anderes Beispiel, das den $ resource approach verwendet, finden Sie in diesem [tutorial] (http://docs.angularjs.org/tutorial/step_11). Ausgehend von der Zeile: 'Beachten Sie, wie in PhoneListCtrl wir ersetzt ... mit $ scope.phones = Phone.query();' –

+0

Hoppla, gerade erstellt [Testbeispiel] (http://plnr.co/edit/ VP1Td3WtdM0E7n5HJH3W? P = Vorschau), und es scheint nicht mit irgendeinem Versprechen zu arbeiten –

Antwort

14

Sie müssen die dann() Funktion auf das Versprechen Objekt verwenden:

this.getItem().then(function(result) { 
    $scope.item = result; 
}); 

In Ihrem Fall Ich glaube nicht, dass du einen Profi brauchst mise. Angulars $ Uhrsystem wird sich um Dinge kümmern. Just return an object in your function, not a primitive type:

this.getItem = function() { 
    var item = {}; 

    // do some async stuff 
    $http.get(...).success(function(result) { 
     item.title = result; 
    }); 
    return item; 
}; 

$scope.item = this.getItem(); 
+0

Ich weiß was du meinst. Ich habe meine Antwort aktualisiert. Sie müssen sich winkelig darum kümmern (es wird es automatisch mit seinem $ watch-System machen). – asgoth

+0

Das zweite Beispiel, das du gabst, sieht nicht einfacher aus als das erste;) Außerdem wird es nicht wie erwartet funktionieren, weil $ http.get() aufgelöst wird, wobei json _item_ darstellt, nicht nur _title_ So ' this.getItem(). then (function (result) { $ scope.item = Ergebnis; }); 'sieht ziemlich akzeptabel aus (Ich habe gerade this.item = result auf $ scope.item = result geändert) –

+0

Ah, tatsächlich dass dies der Umfang hätte sein sollen. Ich werde es ändern, damit Sie es akzeptieren können. – asgoth

1

Ich glaube, der Grund, warum Ihre erste Geige ist nicht funktioniert, weil Sie im Wesentlichen Umfang Eigenschaft item zu einem Versprechen bindend ist. Wenn Sie versuchen, den Wert zu ändern, indem Sie in das Textfeld eingeben, bemerkt eckig die Aktivität und weist den Wert item dem Ergebnis des Versprechens (das sich nicht geändert hat) zu.

Die von @asgoth bereitgestellte Lösung setzt einmal den Wert item, wenn das Versprechen gelöst ist. Es gibt hier keine Bindung (d. H. item ist nicht an das Versprechen gebunden), daher ändert sich durch Ändern des Werts über das Textfeld der Wert.

-1

Es ist wie @Mark sagte, hier können Sie eine Working Example Ihres Snippets finden.

Im Grunde haben Sie ein Objekt zurückgegeben und das Modell selbst nicht gebunden.

$timeout(function(){ 
    $scope.item = { 
     title: 'Some title' 
    }; // Apply the binding 
    deferred.resolve(); // Resolve promise 
},2000); // wait 2 secs   
+0

Die letzte Zeile Ihres JavaScript sollte einfach 'this.getItem();' lauten. –

Verwandte Themen