Turinys
Tai, kaip galime dirbti su savo programomis ir jos vartotojo sąsaja, gali reikšti stilių pakeitimus, šie pakeitimai dažniausiai atsispindi moderniausiose programose, keičiant pamokas CSS iš elementų, tai mes galime valdyti savo elementų spalvas, pakeisti išdėstymą ir pan HTML.KampinisJS leidžia mums dinamiškai atlikti šiuos pakeitimus keičiantis modeliui, todėl galime susieti, kaip programa atrodo kaip visuma, su jos veikimu, tam turime du būdus: vieną naudojant interpoliaciją, o antrąjį - su direktyva ng klasės.
Šiuo atveju įsivaizduokime, kad turime CSS klasė, jei norime tai pritaikyti savo elementui tam tikru momentu ar veiksmu, galime naudoti interpoliacijos žymėjimą Kampinis {{}} kad galėtumėte pritaikyti pakeitimą naudodami funkciją, kuri veikia $ apimtis valdiklis.
Pavyzdžiui, turime klasę, kurioje elementas rodomas pilkai, kad būtų parodytas, jog jis neaktyvus:
.menu-disabled-true {spalva: pilka; } Jei norime tai pritaikyti savo programoje, žinome, kad galime priversti savo elementą atsižvelgti į jo direktyvų būklę, kaip stebime:
- Išjungti
Dabar mes kuriame savo turinį Javascript, čia mes ketiname pakeisti turtą isIšjungta kiekvieną kartą spustelėdami elementą:
funkcija Meniu valdiklis ($ apimtis) {$ ulatis.isDisabled = klaidinga; $ apimtis. disable = function () {$ scope.isDisabled = 'tiesa'; }; } Dabar matome, kaip tai atrodo paleidus programą:
Kitas būdas taikyti stiliaus pakeitimus yra direktyva ng klasės, tai suteikia mums šiek tiek daugiau lankstumo, nes galime pasinaudoti jo veikimo principu KampinisJS Taigi mes galime įvertinti sąlygas ir, priklausomai nuo jų įvykdymo, galime parodyti vieną ar kitą klasę.
Toliau pateiktame pavyzdyje pažiūrėkime, kad norime turėti įspėjimo klasę ir klaidų klasę, ir netgi galime parodyti skirtingus pranešimus, kad vartotojas galėtų žinoti, kas vyksta. Turime CSS klases, kurias naudosime:
.error {fono spalva: raudona; } .warning {background-color: yellow; } Dabar mes sukursime HTML, naudosime direktyvoje ng klasės kai kurios savybės klaida: isError Y įspėjimas: yra ĮspėjimasŠie vertinimai leidžia mums pasirinkti vieną ar kitą klasę iš tų, kuriuos apibrėžėme CSS.
Tada mes turime a {{pranešimas}} kuris parodys atitinkamą vertę, kurią įdėsime į valdiklį:
{{pranešimas}}Imituoti klaidą Imituoti įspėjimąGaliausiai mes atliekame darbą „Javascript“:
funkcija ClasesController ($ apimtis) {$ ulatis.isError = klaidinga; $ scope.isWarning = false; $ ulatis.showError = funkcija () {$ apimtis.message = 'Tai klaida!'; $ scope.isError = tiesa; $ scope.isWarning = false; }; $ ulatis.mostrarWarning = funkcija () {$ apimtis. message = 'Tiesiog įspėjimas.'; $ scope.isWarning = tiesa; $ scope.isError = klaidinga; }; } Tada mūsų naršyklėje pasieksime tokį rezultatą:
DIDELIS
