Mam problem z inicjowaniem zmiennej w zakresie w kontrolerze. Następnie zmienia się w innym kontrolerze, gdy użytkownik loguje się. Ta zmienna służy do kontrolowania takich rzeczy, jak pasek nawigacyjny i ogranicza dostęp do części witryny w zależności od typu użytkownika, dlatego ważne jest, aby zachował swoją wartość. Problem polega na tym, że kontroler, który ją inicjuje, zostaje ponownie wywołany przez ujęcie kątowe, a następnie resetuje zmienną do wartości początkowej.
Zakładam, że to nie jest poprawny sposób deklarowania i inicjowania zmiennych globalnych, no cóż, to nie jest naprawdę globalny, więc moje pytanie brzmi: jaki jest prawidłowy sposób i czy są jakieś dobre przykłady wokół tej pracy z obecną wersją angulara?
angularjs
global-variables
Żarówka 1
źródło
źródło
Odpowiedzi:
Masz zasadniczo 2 opcje dla zmiennych „globalnych”:
$rootScope
http://docs.angularjs.org/api/ng.$rootScope$rootScope
jest rodzicem wszystkich zakresów, więc ujawnione tam wartości będą widoczne we wszystkich szablonach i kontrolerach. Korzystanie z$rootScope
jest bardzo łatwe, ponieważ możesz po prostu wstrzyknąć go do dowolnego kontrolera i zmienić wartości w tym zakresie. Może to być wygodne, ale ma wszystkie problemy związane ze zmiennymi globalnymi .Usługi są singletonami, które można wstrzykiwać do dowolnego kontrolera i ujawniać ich wartości w zakresie kontrolera. Usługi, będąc singletonami, są nadal „globalne”, ale masz znacznie lepszą kontrolę nad tym, gdzie są one używane i narażone.
Korzystanie z usług jest nieco bardziej złożone, ale nie aż tak bardzo, oto przykład:
a następnie w kontrolerze:
Oto działający jsFiddle: http://jsfiddle.net/pkozlowski_opensource/BRWPM/2/
źródło
Jeśli chcesz tylko zapisać wartość, zgodnie z dokumentacją Angular dotyczącą dostawców , powinieneś użyć receptury Value:
Następnie użyj go w kontrolerze takim jak ten:
To samo można osiągnąć za pomocą dostawcy, fabryki lub usługi, ponieważ są one „tylko składniowym cukrem na podstawie przepisu dostawcy”, ale użycie Value osiągnie to, co chcesz, przy minimalnej składni.
Inną opcją jest użycie
$rootScope
, ale tak naprawdę nie jest to opcja, ponieważ nie powinieneś jej używać z tych samych powodów, dla których nie powinieneś używać zmiennych globalnych w innych językach. To zaleca się stosować oszczędnie.Ponieważ wszystkie zakresy dziedziczą po
$rootScope
, jeśli masz zmienną$rootScope.data
i ktoś zapomina, żedata
jest już zdefiniowany i tworzy$scope.data
w zasięgu lokalnym, napotkasz problemy.Jeśli chcesz zmodyfikować tę wartość i zachować ją na wszystkich kontrolerach, użyj obiektu i zmodyfikuj właściwości, pamiętając, że JavaScript jest przekazywany przez „kopię odwołania” :
Przykład JSFiddle
źródło
clientId
możesz ją zaktualizować?Przykład „zmiennych globalnych” AngularJS przy użyciu
$rootScope
:Kontroler 1 ustawia zmienną globalną:
Kontroler 2 odczytuje zmienną globalną:
Oto działający jsFiddle: http://jsfiddle.net/natefriedman/3XT3F/1/
źródło
W celu dodania kolejnego pomysłu do puli wiki, ale co z AngularJS
value
iconstant
modułami? Dopiero zaczynam ich używać, ale wydaje mi się, że są to prawdopodobnie najlepsze opcje tutaj.Uwaga: w chwili pisania tego tekstu, Angular 1.3.7 jest najnowszą stabilną wersją, myślę, że zostały one dodane w wersji 1.2.0, jednak nie potwierdziły tego w dzienniku zmian.
W zależności od tego, ile musisz zdefiniować, możesz utworzyć dla nich osobny plik. Ale ogólnie definiuję je tuż przed
.config()
blokiem mojej aplikacji dla łatwego dostępu. Ponieważ są to nadal efektywne moduły, będziesz musiał polegać na wstrzykiwaniu zależności, aby z nich korzystać, ale są one uważane za „globalne” dla modułu aplikacji.Na przykład:
Następnie wewnątrz dowolnego kontrolera:
Z pytania początkowego wynika, że i tak wymagane są tutaj właściwości statyczne, zarówno zmienne (wartość), jak i końcowe (stałe). To bardziej moja osobista opinia niż cokolwiek innego, ale uważam, że umieszczanie elementów konfiguracji środowiska wykonawczego na
$rootScope
zbyt szybko staje się nieuporządkowane.źródło
W swoim HTML:
źródło
Jeśli masz gwarancję nowoczesnej przeglądarki. Chociaż wiedz, że twoje wartości zostaną zamienione na ciągi.
Ma również przydatną zaletę buforowania między przeładowaniami.
źródło
Popraw mnie, jeśli się mylę, ale po wydaniu Angular 2.0 nie wierzę
$rootScope
, że będzie w pobliżu. Moje przypuszczenie opiera się również na fakcie, który$scope
jest usuwany. Oczywiście kontrolery nadal będą istnieć, ale nie wng-controller
modzie. Zamiast tego pomyślmy o wprowadzeniu kontrolerów do dyrektyw. W związku ze zbliżającą się edycją najlepiej będzie używać usług jako zmiennych globalnych, jeśli chcesz łatwiej przejść z wersji 1.X na 2.0.źródło
Możesz także użyć zmiennej środowiskowej,
$window
aby zmienna globalna zadeklarowana poza kontrolerem mogła zostać sprawdzona wewnątrz$watch
Uważaj, cykl podsumowania jest dłuższy przy tych globalnych wartościach, więc nie zawsze jest aktualizowany w czasie rzeczywistym. Muszę zbadać ten czas trawienia przy tej konfiguracji.
źródło
Właśnie przypadkowo znalazłem inną metodę:
Zadeklarowałem
var db = null
powyższą deklarację aplikacji, a następnie zmodyfikowałem ją w momencie,app.js
gdy uzyskałem do niej dostęp, mogłem uzyskaćcontroller.js
do niej dostęp bez problemu. Mogą być pewne problemy z tą metodą, o których nie wiem, ale to chyba dobre rozwiązanie.źródło
Spróbuj tego, nie będziesz zmuszać do wstrzykiwania
$rootScope
kontrolera.Możesz go używać tylko w bloku uruchamiania, ponieważ blok konfiguracji nie zapewni ci korzystania z usługi $ rootScope.
źródło
To jest naprawdę dość łatwe. (Jeśli mimo to używasz Angulara 2+).
Po prostu dodaj
Gdzieś w górnej części pliku komponentu (na przykład po instrukcjach „importowania”), będziesz mieć dostęp do „myGlobalVarName” w dowolnym miejscu w komponencie.
źródło
Możesz także zrobić coś takiego ..
źródło