Ich habe einen Basis-Controller, der meine Produkte anzeigt.
App.controller('ProductCtrl',function($scope,$productFactory){
$productFactory.get().success(function(data){
$scope.products = data;
});
});
Aus meiner Sicht zeige ich diese Produkte in einer Liste an
<ul>
<li ng-repeat="product as products">
{{product.name}}
</li>
</ul
Ich versuche zu tun, wenn jemand auf den Produktnamen klickt, ich habe eine andere Ansicht namens Warenkorb, in der dieses Produkt hinzugefügt wird.
<ul class="cart">
<li>
//click one added here
</li>
<li>
//click two added here
</li>
</ul>
Mein Zweifel hier ist also, wie diese angeklickten Produkte vom ersten Controller zum zweiten weitergegeben werden können. Ich ging davon aus, dass Cart auch ein Controller sein sollte.
Ich behandle Klickereignisse mit Direktiven. Ich denke auch, ich sollte den Service nutzen, um die oben genannten Funktionen zu erreichen. Kannst du nicht herausfinden, wie? Da der Warenkorb vordefiniert ist, kann die Anzahl der hinzugefügten Produkte je nach Seitenbenutzer 5/10 betragen. Also möchte ich dieses Generikum behalten.
Aktualisieren:
Ich habe einen Dienst zum Senden erstellt und im zweiten Controller erhalte ich ihn. Die Frage ist nun, wie ich dom aktualisiere. Da meine Liste zum Löschen von Produkten ziemlich fest codiert ist.
quelle
Antworten:
Aus der Beschreibung geht hervor, dass Sie einen Dienst verwenden sollten. Unter http://egghead.io/lessons/angularjs-sharing-data-between-controllers und AngularJS Service Passing Data zwischen Controllern finden Sie einige Beispiele.
Sie können Ihren Produktservice (als Fabrik) als solche definieren:
Die Abhängigkeit injiziert den Dienst in beide Controller.
ProductController
Definieren Sie in Ihrer Aktion eine Aktion, mit der das ausgewählte Objekt dem Array hinzugefügt wird:In Ihrem
CartController
erhalten Sie die Produkte vom Service:quelle
$http
z. B. per Aufruf auf dem Server speichern ).Beim Klicken können Sie eine Methode aufrufen, die Broadcast aufruft :
und der zweite Controller hört dieses Tag wie folgt ab:
Da wir $ scope nicht in Services einfügen können, gibt es nichts Besseres als einen singleton $ scope.
Aber wir können spritzen
$rootScope
. Wenn Sie also Wert im Service speichern, können Sie ihn$rootScope.$broadcast('SOME_TAG', 'your value');
im Service-Body ausführen . (Siehe @Charx Beschreibung der Dienste)Bitte lesen Sie einen guten Artikel über $ Broadcast , $ Emit
quelle
$rootScope.$broadcast
benachrichtigt alle Controller mit paralleler Struktur, auch bekannt als dieselbe Ebene.$watch
wenn der Wert auf$rootScope
Ebene existiert . Andernfalls benachrichtigt möglicherweise nur Broadcast andere Controller. Zu Ihrer Information, wenn andere Programmierer in Ihrem Code sehenbroadcast
- die Logik ist klar, was Sie versuchen - "Broadcast-Ereignis". Sowieso von meiner exp. Es ist keine gute Praxisrootscope
fürwatch
. Informationen zu "Nur zum ersten Mal feuern": Sehen Sie sich dieses Beispiel an: plnkr.co/edit/5zqkj7iYloeHYkzK1Prt?p=preview Sie haben alte und neue Werte. Stellen Sie sicher, dass jedes Mal, wenn Sie einen neuen Wert erhalten, der nicht dem alten entsprichtLösung ohne Service zu erstellen, mit $ rootScope:
Um Eigenschaften für App-Controller freizugeben, können Sie Angular $ rootScope verwenden. Dies ist eine weitere Option zum Teilen von Daten, damit die Benutzer davon erfahren.
Die bevorzugte Methode zum Teilen einiger Funktionen zwischen Controllern ist Services, um eine globale Eigenschaft zu lesen oder zu ändern, die Sie mit $ rootcope verwenden können.
Verwenden von $ rootScope in einer Vorlage (Zugriffseigenschaften mit $ root):
quelle
$rootScope
sollte so weit wie möglich vermieden werden.Sie können dies auf zwei Arten tun.
Durch die Verwendung
$rootscope
, aber ich empfehle dies nicht. Das$rootScope
ist der oberste Bereich. Eine App kann nur eine$rootScope
haben, die von allen Komponenten einer App gemeinsam genutzt wird. Daher verhält es sich wie eine globale Variable.Dienste nutzen. Sie können dies tun, indem Sie einen Dienst zwischen zwei Controllern teilen. Der Code für den Service kann folgendermaßen aussehen:
Sie können meine Geige hier sehen .
quelle
Eine noch einfachere Möglichkeit, die Daten zwischen Controllern auszutauschen, ist die Verwendung verschachtelter Datenstrukturen. Anstelle von zum Beispiel
wir können benutzen
Die
data
Eigenschaft wird vom übergeordneten Bereich geerbt, damit wir ihre Felder überschreiben und den Zugriff von anderen Controllern beibehalten können.quelle
quelle
Wir können Daten in einer Sitzung speichern und sie überall in unserem Programm verwenden.
Anderer Ort
quelle
Ich habe die Antworten hier gesehen und es beantwortet die Frage des Datenaustauschs zwischen Controllern. Aber was soll ich tun, wenn ein Controller den anderen über die Tatsache informieren soll, dass die Daten geändert wurden (ohne Broadcast zu verwenden)? EINFACH! Nur mit dem berühmten Besuchermuster:
Auf diese einfache Weise kann ein Controller einen anderen Controller aktualisieren, wenn einige Daten aktualisiert wurden.
quelle
Ich habe eine Factory erstellt, die den gemeinsamen Bereich zwischen dem Muster des Routenpfads steuert, sodass Sie die freigegebenen Daten nur dann verwalten können, wenn Benutzer im gleichen übergeordneten Routenpfad navigieren.
Wenn der Benutzer zu einem anderen Routenpfad wechselt, z. B. '/ Support', werden die freigegebenen Daten für den Pfad '/ Kunde' automatisch zerstört. Wenn der Benutzer stattdessen zu "untergeordneten" Pfaden wie "/ Customer / 1" oder "/ Customer / list" wechselt, wird der Bereich nicht zerstört.
Ein Beispiel finden Sie hier: http://plnkr.co/edit/OL8of9
quelle
1
2
Beim Klicken können Sie eine Methode aufrufen, die Broadcast aufruft:
3
4
5
Ein Weg mit Winkelservice:
quelle
Erstellen Sie eine Factory in Ihrem Modul und fügen Sie eine Referenz der Factory in der Steuerung hinzu. Verwenden Sie deren Variablen in der Steuerung. Ermitteln Sie jetzt den Wert der Daten in einer anderen Steuerung, indem Sie eine Referenz hinzufügen, wo immer Sie möchten
quelle
Ich weiß nicht, ob es jemandem helfen wird, aber basierend auf der Antwort von Charx (danke!) Habe ich einen einfachen Cache-Service erstellt. Fühlen Sie sich frei zu verwenden, zu remixen und zu teilen:
quelle
Ein Weg mit Winkelservice:
https://jsfiddle.net/1w64222q/
quelle
Zu Ihrer Information Das $ scope-Objekt hat die $ emit, $ Broadcast, $ on UND Das $ rootScope-Objekt hat die identische $ emit, $ Broadcast, $ on
Lesen Sie mehr über Publish / Subscribe - Musterentwurf in Winkel hier
quelle
Um die von @Maxim vorgeschlagene Lösung mithilfe von $ Broadcast zu verbessern, ändern sich die Sendedaten nicht
aber auf Daten zu hören
quelle
Es gibt drei Möglichkeiten, dies zu tun:
a) Nutzung eines Dienstes
b) Ausnutzen der abhängigen Eltern / Kind-Beziehung zwischen Controller-Bereichen.
c) In Angular 2.0 werden die Daten mit dem Schlüsselwort "As" von einem Controller an einen anderen übergeben.
Weitere Informationen mit Beispiel finden Sie unter folgendem Link:
http://www.tutespace.com/2016/03/angular-js.html
quelle
Erster Controller
Zweiter Controller
quelle
Ich denke, die
bester Weg
ist $ localStorage zu verwenden. (Funktioniert die ganze Zeit)Ihr cardController wird sein
Sie können auch hinzufügen
quelle