Spisie treści
Sposób, w jaki możemy pracować z naszymi aplikacjami i ich interfejs użytkownika może sugerować zmiany w stylach, zmiany te znajdują odzwierciedlenie w większości w najnowocześniejszych aplikacjach ze zmianami w Lekcje CSS elementów, dzięki temu możemy rozmieścić kolory, zmienić aranżację itp. naszych elementów HTML.AngularJS pozwala nam na wprowadzanie tych zmian dynamicznie, gdy zmienia się model, dzięki czemu możemy powiązać wygląd aplikacji jako całość z jej działaniem, do tego mamy dwa sposoby, jeden za pomocą interpolacji, a drugi z dyrektywą klasa ng.
W tym przypadku wyobraźmy sobie, że mamy Klasa CSS, jeśli chcemy zastosować go do naszego elementu w określonym momencie lub akcji, możemy użyć notacji interpolacyjnej kątowy {{}} dzięki czemu możesz zastosować zmianę za pomocą funkcji działającej na $ zakres kontroler.
Na przykład mamy klasę, która pokazuje element w kolorze szarym, aby pokazać, że nie jest on aktywny:
.menu-disabled-true {kolor: szary; } Jeśli chcemy zastosować go do naszej aplikacji, wiemy, że możemy sprawić, by nasz element przybrał stan jego dyrektyw, tak jak obserwujemy:
- Dezaktywować
Teraz tworzymy zawartość naszego JavaScript, tutaj zmienimy właściwość jest niepełnosprawny za każdym razem, gdy klikniemy na nasz element:
function MenuController ($zakres) {$zakres.isDisabled = false; $ zakres. wyłączyć = funkcja () {$ scope.isDisabled = 'prawda'; }; } Teraz widzimy, jak to wygląda po uruchomieniu aplikacji:
Innym sposobem na zastosowanie zmian w stylu jest dyrektywa klasa ng, pozwala nam to na nieco większą elastyczność, ponieważ możemy wykorzystać sposób, w jaki to działa AngularJS w ten sposób możemy ocenić warunki iw zależności od ich spełnienia możemy pokazać jedną lub inną klasę.
Zobaczmy w poniższym przykładzie, że chcemy mieć klasę ostrzeżenia i klasę błędu, dzięki czemu możemy nawet wyświetlać różne komunikaty, aby użytkownik był świadomy tego, co się dzieje. Mamy klasy CSS, z których będziemy korzystać:
.error {kolor tła: czerwony; } .ostrzeżenie {kolor tła: żółty; } Teraz wygenerujemy HTML, użyjemy w dyrektywie klasa ng niektóre właściwości błąd: isError Tak ostrzeżenie: jest ostrzeżenieTe oceny to te, które pozwalają nam wybrać jedną lub inną klasę z tych, które zdefiniowaliśmy w CSS.
Następnie mamy {{wiadomość}} która pokaże odpowiednią wartość, którą umieścimy w kontrolerze:
{{wiadomość}}Symuluj błąd Symuluj ostrzeżenieWreszcie wykonujemy pracę w Javascript:
function ClassesController ($ scope) {$ scope.isError = false; $ scope.isWarning = false; $ scope.showError = function () {$ scope.message = 'To jest błąd!'; $ zakres.isError = prawda; $ scope.isWarning = false; }; $ scope.mostrarWarning = function () {$ scope. message = 'Tylko ostrzeżenie.'; $ zakres.isWarning = prawda; $ scope.isError = false; }; } Dzięki temu uzyskamy w naszej przeglądarce wynik podobny do następującego:
POWIĘKSZAĆ
