Ich verstehe überhaupt keine angular Datenbindung

Question

Ich habe mehrere Stunden damit verbracht, kleinere Variationen dieses Codes auszuprobieren, und ich verstehe nicht, warum einer funktioniert und der andere nicht.

Hier ist das Szenario: Ich versuche, eine Liste der registrierten Benutzer (die ich mit einer einfachen Datenbankabfrage erhalten, die nur ein paar Spalten zurückgibt) zu präsentieren, wenn der Name eines Benutzers angeklickt wird, werde ich Weitere Informationen zu diesem Benutzer aus der Datenbank abrufen und in einer anderen Ansicht anzeigen. Im Moment mache ich das mit regulären <a> Elementen mit einer ng-click Direktive, die einen Wert namens currentid setzt. An anderer Stelle in meinem Code verwende ich $watch(), um eine neue Datenbankabfrage zu senden, wenn sich currentid ändert. Dieser Teil scheint zu funktionieren (ich sehe die console.log() Ausgabe von meinem Uhrrückruf, und die Datenbankfrage spuckt die richtigen Daten aus) ... aber manchmal ändert sich currentid, und manchmal tut es nicht, und ich kann nicht warum herausfinden.

• A jsfiddle wo es nicht funktioniert: http://jsfiddle.net/aLcRL/11/
• A jsfiddle wo es funktioniert: http://jsfiddle.net/aLcRL/12/

(Klicken Sie auf die "rmunn" und "admin" Links in der Tabelle: die "Currrent ID" Wert sollte unten aktualisiert werden. Und bitte entschuldigen Sie den fast vollständigen Mangel an CSS, ich bin ein Programmierer, kein Grafikdesigner ("Dammit, Jim!"), Und es ist auch sehr spät in meiner Zeitzone jetzt, also ich Ich habe keine Motivation, das zu verschönern. Es ist funktional, es zeigt das Problem, und ich werde es dabei belassen.)

Der einzige Unterschied zwischen diesen beiden ist, dass einer an currentid bindet und der andere an vars.currentid bindet. Jetzt verstehe ich, warum die Bindung an currentid bei einem Eltern- und einem Kindbereich nicht funktioniert (der Wert des Kindes würde den Wert des Elternelements überschatten); Da ich von einem Python-Hintergrund komme, ist dies für mich sinnvoll (ähnlich wie Pythons Instanz-Namespaces die Namespaces von allen in der Klasse definierten Objekten abbilden können). Aber in diesem Fall verwende ich nur einen Controller - sind nicht alle diese Variablen im selben Umfang?

Ich habe meinen Kopf gegen diese ganzen Tag zu schlagen, und die mehrere Stack-Überlauf Antworten, die ich versucht habe, zu lesen (wie How does data binding work in AngularJS? zum Beispiel) verlassen haben, nur um mich noch mehr verwirrt: $apply() und $digest() und Bereiche, oh mein ! Also, wenn mir jemand einen netten einfachen Anfängerführer für Bereiche in Angular geben kann (oder mich auf einen bereits geschriebenen verweisen, den ich vermisst habe), wäre ich sehr dankbar.

"Ich habe Clojure und Haskell gelernt, ich kann ein einfaches Javascript-Framework lernen", dachte ich. "Das wird einfach sein." Junge, habe ich falsch gelegen. :-)

Answer 1

Sie stoßen auf ein Problem, bei dem ng-repeat einen untergeordneten Bereich erstellt.

<tr ng-repeat="user in data" blarg="{{user.id}}"> 
    <!-- currentid here is part of the ng-repeat child scope 
    and not your root scope --> 
    <td><a href="#{{user.id}}" ng-click="currentid = user.id">{{user.userName}}</a></td> 
    <td>{{user.email}}</td> 
</tr> 

Wenn Sie den übergeordneten Bereich zugreifen möchten, können Sie verwenden $parent.currentid

<a href="#{{user.id}}" ng-click="$parent.currentid = user.id">{{user.userName}}</a> 

Sie müssen $apply() verwenden, wenn Sie einen Wert außerhalb der Winkel Welt verändern. Zum Beispiel mit setTimeout() oder einem jQuery Plugin. Der Aufruf $apply() warnt Angular, um die scope zu überprüfen, um festzustellen, ob sich etwas geändert hat, und entsprechend zu aktualisieren.