İçindekiler
Uygulamalarımızı ve kullanıcı arayüzünü çalışma şeklimiz, stillerde değişiklikler anlamına gelebilir, bu değişiklikler çoğunlukla en modern uygulamalara yansımaktadır. dersler CSS Bununla birlikte, elementlerimizi renkleri yerleştirmeyi, düzenlemeyi değiştirmeyi vb. HTML.AngularJS model değiştiğinde bu değişiklikleri dinamik olarak yapmamızı sağlar, böylece uygulamanın bir bütün olarak nasıl göründüğünü işleyişine bağlayabiliriz, bunun için iki yolumuz var, biri enterpolasyon kullanarak ve ikincisi direktifle ng sınıfı.
Bu durumda elimizde bir tane olduğunu düşünelim. CSS sınıfı, onu belirli bir anda veya eylemde öğemize uygulamak istiyorsak, enterpolasyon gösterimini kullanabiliriz. açısal {{}} böylece değişikliği, üzerinde çalışan bir işlevle uygulayabilirsiniz. $ kapsam kontrolör.
Örneğin, aktif olmadığını göstermek için bir öğeyi gri olarak gösteren bir sınıfımız var:
.menu-disabled-true {renk: gri; } Bunu uygulamamıza uygulamak istiyorsak, gözlemlediğimiz gibi elementimizin direktiflerinin durumunu almasını sağlayabileceğimizi biliyoruz:
- Devre dışı bırakmak
Şimdi içeriğimizi yapıyoruz Javascript, burada özelliği değiştireceğiz Devre Dışı elementimize her tıkladığımızda:
function MenuController ($ kapsam) {$ kapsam.isDisabled = false; $ kapsamı. devre dışı bırak = işlev () {$ kapsam.isDisabled = 'true'; }; } Şimdi uygulamayı başlatırken nasıl göründüğünü görüyoruz:
Stil değişikliklerini uygulamanın başka bir yolu direktiftir. ng sınıfı, bu, çalışma şeklinden yararlanabildiğimiz için bize biraz daha fazla esneklik sağlar. AngularJS böylece koşulları değerlendirmeyi başarabiliriz ve bunların yerine getirilmesine bağlı olarak şu veya bu sınıfı gösterebiliriz.
Aşağıdaki örnekte bir uyarı sınıfına ve bir hata sınıfına sahip olmak istediğimizi görelim, bununla farklı mesajlar bile gösterebiliriz, böylece kullanıcı neler olup bittiğinin farkında olabilir. Kullanacağımız CSS sınıflarımız var:
.error {arka plan rengi: kırmızı; } .warning {arka plan rengi: sarı; } Şimdi üreteceğiz HTML, yönergede kullanacağız ng sınıfı bazı özellikler hata: isError Y uyarı: isUyarıBu değerlendirmeler, CSS'de tanımladığımız sınıflardan birini veya diğerini seçmemize izin veren değerlendirmelerdir.
Sonra bir {{İleti}} denetleyiciye yerleştireceğimiz ilgili değeri gösterecek olan:
{{İleti}}Hatayı Simüle Et Uyarıyı Simüle EtSon olarak Javascript'te işi yapıyoruz:
function ClasesController ($ kapsam) {$ kapsam.isError = false; $ kapsam.isUyarı = yanlış; $scope.showError = function () {$scope.message = 'Bu bir hatadır!'; $ kapsam.isError = doğru; $ kapsam.isUyarı = yanlış; }; $ kapsam.mostrarUyarı = işlev () {$ kapsam. mesaj = 'Sadece bir uyarı.'; $ kapsam.isUyarı = doğru; $ kapsam.isError = yanlış; }; } Bununla tarayıcımızda aşağıdaki gibi bir sonuç elde edeceğiz:
BÜYÜT
