ng-Bindung funktioniert nicht, aber ng-Modell funktioniert

Ich lerne Angular (1.3.10) zu verwenden, habe ich zwei Eingabefelder, die die Farbe und Wert für eine Hand der Spielkarte angeben. Wie Sie auf dem Bild unten sehen können, wenn ich versuche, den Anzug und Wert zu kodieren, erscheint die Karte gut (eine rechts). Aber wenn ich ng-model zum Binden verwende, wird der card_value nicht korrekt angezeigt, obwohl er vom Browser erkannt wird. Was mache ich falsch?ng-Bindung funktioniert nicht, aber ng-Modell funktioniert

<div ng-app = "cards"> 
    <form> 
     <div> 
      <input ng-model = "card_value"> 
      <span>of</span> 
      <input ng-model = "card_suit"> 
     </div> 
    </form> 

    <div> 
     <p>Entered: {{card_value}} of {{card_suit}}</p> 

     <!-- card.value is not binding up perfectly fine --> 
     <card value = "{{card_value}}" suit = "{{card_suit}}"></card> 
     <!-- --> 

     <!-- this shows up perfectly fine --> 
     <card value = "5" suit = "Clubs" ></card> 
     <!-- --> 
    </div> 
</div>

Was ich sehe, angezeigt wird:

Chrome Inspektor: der Teil, der markiert ist, wo ng-Bindung fehlschlägt, sollte 5

Quelle

2016-09-10 Anonymous

'this.pips' ist verwenden sollte nie später modifiziert. Um die Bindung zu machen, kann es 'this.getPip = getPip' sein und dann kann' card.pip' in der Vorlage durch 'card.getPip()' ersetzt werden (das gleiche gilt für diese.anzeige). Das Gute ist, dass die Bindung funktioniert. Das Schlimme ist, dass ein unendlicher Digest verursacht werden kann, weil die Bindung nicht effizient berechnet werden kann. In jedem Fall wird die Leistung durch die Verwendung von ng-repeat für jeden Pip sehr schnell zunichte gemacht. Es ist in Ordnung, wenn dies eine Demo ist, aber für eine echte App möchten Sie möglicherweise vorgefertigte Bilder für Aussehen und Leistung verwenden. – estus

@estus Wenn ich vorgefertigte Bilder verwende, dann werde ich mit 52 if-Anweisungen enden. Es muss einen besseren Weg geben –

@estus würde es Ihnen etwas ausmachen, Ihre Lösung in Code zu stecken, es ist ein bisschen schwer zu folgen –

ng-bind hat Einweg-Datenbindung .

ng-model soll innerhalb von Formularelementen zu setzen und hat zwei-Wege-Daten Bindung Sie ng-bind

einmal auf Anweisung init zugewiesen und

<div ng-bind-html="card_value"></div>

DEMO APP

Quelle

2016-09-10 03:50:39 Sajeetharan

Warum dieses anstelle von ng-Modell verwenden? –

@ b11 Sie können ng-model nicht für ein div verwenden, Sie können Folgendes gemäß der Dokumentation verwenden Die ngModel-Direktive bindet eine Eingabe, select, textarea (oder benutzerdefiniertes Formularsteuerelement) an eine Eigenschaft im Bereich mithilfe von NgModelController erstellt und durch diese Richtlinie herausgestellt. – Sajeetharan

im Beispiel [ng-bind] (https://docs.angularjs.org/api/ng/directive/ngBind), setzen sie immer noch ein 'ng-Modell' in die Eingabe und ein' ng-bind' in die Spannelement. Wie würde ich es in meinem Fall verwenden, da die Karte eine Direktive ist, die ich erstellt habe und nicht ein div –

ng-Bindung funktioniert nicht, aber ng-Modell funktioniert

Antwort

Verwandte Themen