Mam podstawowy kontroler, który wyświetla moje produkty,
App.controller('ProductCtrl',function($scope,$productFactory){
$productFactory.get().success(function(data){
$scope.products = data;
});
});
Moim zdaniem wyświetlam te produkty na liście
<ul>
<li ng-repeat="product as products">
{{product.name}}
</li>
</ul
Próbuję zrobić, gdy ktoś kliknie nazwę produktu, mam inny widok o nazwie koszyk, w którym ten produkt został dodany.
<ul class="cart">
<li>
//click one added here
</li>
<li>
//click two added here
</li>
</ul>
Więc mam wątpliwości, w jaki sposób przenieść te kliknięte produkty z pierwszego kontrolera na drugi? założyłem, że wózek powinien być również kontrolerem.
Obsługuję zdarzenie click za pomocą dyrektywy. Czuję też, że powinienem korzystać z usługi, aby osiągnąć powyższą funkcjonalność, po prostu nie mogę zrozumieć, w jaki sposób? ponieważ koszyk zostanie wstępnie zdefiniowany, liczba dodanych produktów może wynosić 5/10, w zależności od użytkownika strony. Więc chciałbym zachować to ogólne.
Aktualizacja:
Stworzyłem usługę do emisji i na drugim kontrolerze ją odbieram. Teraz pytanie brzmi: jak zaktualizować dom? Ponieważ moja lista upuszczania produktu jest dość zakodowana.
źródło
Odpowiedzi:
Z opisu wydaje się, że powinieneś korzystać z usługi. Sprawdź http://egghead.io/lessons/angularjs-sharing-data-between-controllers i AngularJS Service przekazywanie danych między kontrolerami, aby zobaczyć kilka przykładów.
Możesz zdefiniować swoją usługę produktu (jako fabrykę) jako taką:
Zależność wstrzykuje usługę do obu kontrolerów.
W swoim
ProductController
zdefiniuj akcję, która doda wybrany obiekt do tablicy:W swoim
CartController
, uzyskaj produkty z usługi:źródło
$http
na przykład zapisywanie na serwerze przez połączenie).Po kliknięciu możesz wywołać metodę wywołującą rozgłaszanie :
a drugi kontroler będzie nasłuchiwał na tym tagu:
Ponieważ nie możemy wstrzyknąć $ scope do usług, nie ma to jak singleton $ scope.
Ale możemy wstrzyknąć
$rootScope
. Jeśli więc przechowujesz wartość w usłudze, możesz uruchomić$rootScope.$broadcast('SOME_TAG', 'your value');
w treści usługi. (Zobacz opis @Charx na temat usług)Sprawdź dobry artykuł o $ broadcast , $ emit
źródło
$rootScope.$broadcast
powiadamia wszystkie kontrolery, które mają równoległą strukturę aka tego samego poziomu.$watch
jeśli wartość istnieje na$rootScope
poziomie. W przeciwnym razie tylko transmisja może powiadomić inne kontrolery. Do twojej wiadomości, jeśli inny programista widzi w twoim kodziebroadcast
- logika jest jasna, co próbujesz zrobić - „zdarzenie broadcast”. W każdym razie z mojego doświadczenia. to nie jest dobra praktyka, aby użyćrootscope
dowatch
. O „strzelaj tylko raz”: spójrz na ten przykład: plnkr.co/edit/5zqkj7iYloeHYkzK1Prt?p=preview masz stare i nowe wartości. upewnij się, że za każdym razem, gdy dostajesz nową wartość, która nie jest równa starejRozwiązanie bez tworzenia usługi przy użyciu $ rootScope:
Aby udostępnić właściwości między kontrolerami aplikacji, możesz użyć Angular $ rootScope. To kolejna opcja udostępniania danych, dzięki czemu ludzie o nich wiedzą.
Preferowanym sposobem udostępniania niektórych funkcji między kontrolerami są Usługi, do odczytu lub zmiany globalnej właściwości, której można użyć $ rootscope.
Używanie $ rootScope w szablonie (Dostęp do właściwości za pomocą $ root):
źródło
$rootScope
należy unikać w jak największym stopniu.Możesz to zrobić na dwa sposoby.
Używam
$rootscope
, ale nie polecam tego. Jest$rootScope
to najwyższy zakres. Aplikacja może mieć tylko jedną,$rootScope
która będzie współużytkowana przez wszystkie składniki aplikacji. Dlatego działa jak zmienna globalna.Korzystanie z usług. Możesz to zrobić, udostępniając usługę między dwoma kontrolerami. Kod usługi może wyglądać następująco:
Można zobaczyć moje skrzypce tutaj .
źródło
Jeszcze prostszym sposobem udostępniania danych między kontrolerami jest użycie zagnieżdżonych struktur danych. Zamiast na przykład
możemy użyć
data
Nieruchomość będą dziedziczone z zakresu dominującej więc możemy nadpisać swoje pola, zachowując dostęp z innych kontrolerów.źródło
źródło
możemy przechowywać dane w sesji i możemy ich używać w dowolnym miejscu w naszym programie.
Inne miejsce
źródło
Widziałem tutaj odpowiedzi i to odpowiada na pytanie o współdzielenie danych między administratorami, ale co powinienem zrobić, jeśli chcę, aby jeden administrator powiadomił drugi o fakcie, że dane zostały zmienione (bez użycia rozgłaszania)? ŁATWO! Wystarczy użyć słynnego wzoru dla odwiedzających:
W ten prosty sposób jeden kontroler może zaktualizować inny kontroler, że niektóre dane zostały zaktualizowane.
źródło
Stworzyłem fabrykę, która kontroluje współużytkowany zakres między wzorcem ścieżki trasy, abyś mógł utrzymywać wspólne dane tylko wtedy, gdy użytkownicy nawigują tą samą ścieżką nadrzędną trasy.
Jeśli więc użytkownik przejdzie do innej ścieżki trasy, na przykład „/ Wsparcie”, udostępnione dane dla ścieżki „/ Klient” zostaną automatycznie zniszczone. Ale jeśli zamiast tego użytkownik przejdzie do ścieżek „podrzędnych”, takich jak „/ Customer / 1” lub „/ Customer / list”, zakres nie zostanie zniszczony.
Możesz zobaczyć próbkę tutaj: http://plnkr.co/edit/OL8of9
źródło
1
2)
Po kliknięciu możesz wywołać metodę wywołującą rozgłaszanie:
3)
4
5
Jednym ze sposobów korzystania z usługi kątowej:
źródło
Stwórz fabrykę w swoim module i dodaj referencję do fabryki w kontrolerze i użyj jej zmiennych w kontrolerze, a teraz uzyskaj wartość danych w innym kontrolerze, dodając referencję tam, gdzie chcesz
źródło
Nie wiem, czy to komukolwiek pomoże, ale na podstawie odpowiedzi Charxa (dzięki!) Stworzyłem prostą usługę pamięci podręcznej. Zachęcamy do korzystania, remiksowania i udostępniania:
źródło
Jednym ze sposobów korzystania z usługi kątowej:
https://jsfiddle.net/1w64222q/
źródło
Do Twojej wiadomości Obiekt $ scope ma $ emit, $ broadcast, $ on ORAZ $ rootScope Object ma identyczny $ emit, $ broadcast, $ on
czytaj więcej o publikowaniu / subskrybowaniu wzorca projektowego w kanciastych tutaj
źródło
Aby ulepszyć rozwiązanie zaproponowane przez @Maxim za pomocą $ broadcast, wysyłanie danych się nie zmienia
ale do nasłuchiwania danych
źródło
Istnieją trzy sposoby, aby to zrobić,
a) korzystanie z usługi
b) Wykorzystywanie zależności relacji rodzic / dziecko między zakresami kontrolera.
c) W Angular 2.0 słowo kluczowe „As” będzie przekazywać dane z jednego kontrolera do drugiego.
Aby uzyskać więcej informacji z przykładem, sprawdź poniższy link:
http://www.tutespace.com/2016/03/angular-js.html
źródło
Pierwszy kontroler
Drugi kontroler
źródło
Myślę że
Najlepszym sposobem
jest użycie $ localStorage. (Działa cały czas)Twoja kartaController będzie
Możesz także dodać
źródło