Ich habe Threads zu diesem Thema gelesen, wie zum Beispiel: Die Ansicht wird nicht aktualisiert in AngularJS , aber ich kann immer noch nicht verstehen, wie ich es an meinem einfachen Beispiel anwenden soll.
Ich habe diese Funktion:
%Vor% Wenn myModel an anderer Stelle im Code aktualisiert wird (wenn der Benutzer klickt, interagiert, XHR-Anfragen sendet), wird meine Ansicht nicht aktualisiert. Ich verstehe, dass ich etwas mit $ anwenden muss, aber ich habe nicht verstanden, wo und wie.
Kann mir jemand erklären, wie ich dieses Problem für diesen einfachen Anwendungsfall lösen kann?
Mein Modell sieht ungefähr so aus (wenn das für die Frage notwendig ist) - es enthält keinen AngularJS-Code:
%Vor%Hinzufügen eines JSfiddle-Beispiels: Ссылка
Der Kern Ihres Problems ist, dass Sie AngularJS mit einem sehr traditionellen JavaScript-Muster "jQuery-suppe style" mischen möchten. In Angular sollten Sie immer Anweisungen verwenden, um DOM-Manipulation und Interaktion (einschließlich Klicks) vorzunehmen. In diesem Fall sollte Ihr Code mehr wie folgt aussehen:
%Vor% %Vor% Beachten Sie, dass wir, statt einen manuellen click -Handler mit jQuery einzurichten, die von Angular eingebaute Anweisung ng-click verwenden. Dadurch können wir uns an den Lebenszyklus des Angular-Scopes binden und die Ansicht korrekt aktualisieren, wenn der Benutzer auf den Link klickt.
Hier ist ein Zitat aus der AngularJS FAQ ; Ich habe einen Teil geschrieben, der dir helfen könnte, die Angewohnheit abzulegen.
Häufige Fallstricke
Der eckige Unterstützungskanal (#angularjs auf Freenode) sieht eine Reihe von wiederkehrenden Fallstricken, in die neue Benutzer von Angular fallen. Dieses Dokument zielt darauf ab, sie herauszustellen, bevor Sie sie auf die harte Tour entdecken.
DOM-Manipulation
Versuchen Sie nicht mehr, jQuery zu verwenden, um das DOM in Controllern zu ändern. Ja wirklich. Dazu gehören das Hinzufügen von Elementen, das Entfernen von Elementen, das Abrufen von Inhalten, das Anzeigen und Verbergen von Elementen. Verwenden Sie integrierte Anweisungen, oder schreiben Sie bei Bedarf eigene, um Ihre DOM-Manipulation durchzuführen. Siehe unten über die Duplizierungsfunktionalität.
Wenn Sie Schwierigkeiten haben, die Gewohnheit abzulegen, ziehen Sie in Betracht, jQuery aus Ihrer App zu entfernen. Ja wirklich. Angular hat den $ http-Dienst und mächtige Direktiven, die es fast immer unnötig machen. Angulars gebündelte jQLite hat eine Handvoll der Features, die am häufigsten zum Schreiben angularer Direktiven verwendet werden, insbesondere die Bindung an Ereignisse.
Schließlich, hier Ihr Beispiel, arbeitet mit dieser Technik: Ссылка
Versuchen Sie $ scope. $ apply () in Ihrem Controller, nachdem Sie Ihr Modell aktualisiert haben
Ihr Problem ist zweifach.
1) Es gab einen Syntaxfehler in Ihrer jsfiddle, da DOMElements (wie das a, das von $ (this) in Ihrem clickhandler zurückgegeben wird, keine Voreinstellung haben. Sie mussten tatsächlich ein Event übergeben. (Kleinere Syntax) / p>
2) Indem Sie Ihre Variablendefinition so in den Controller-Bereich einfügen:
%Vor%Sie stellen sicher, dass es einmal pro Klasseninstanziierung ausgeführt wird.
Was Sie wollen, ist:
%Vor%Und dann auf Ihrem Link
%Vor%Ein ausführlicheres Codebeispiel finden Sie in der verknüpften jsfiddle.
Einen guten Überblick über die Theorie finden Sie im ersten Vortrag hier:
In angularen Apps werden Modelle normalerweise normalerweise in $ scope implementiert, nicht als separates JavaScript-Objekt. Hier ist eine Neufassung Ihrer App, die zeigt, wie Sie das tun
HTML:
%Vor%Hier ist eine Geige ohne jQuery und es zeigt den "normalen Weg", eine Geige für Angular einzurichten.
Tags und Links javascript html angularjs model-view-controller