Değer boyutlandırmak penceresinde Ng-Class uygulanmaz

aşağıdaki denetleyicisi var.Değer boyutlandırmak penceresinde Ng-Class uygulanmaz

function PlansController($scope) { 

    var vm = this; 
    vm.plan = null; 

    vm.show = function (plan) { 
    vm.plan = plan; 
    } 

    $scope.$on("match", function (event, mq) {     
    if (mq === "mobile") { 
     vm.plan = "free"; 
     console.log(vm.plan); 
    }   
    }); 

})();

$ kapsamını maçı yangınları üzerine $ zaman medya sorgusu "ekranı ve (max-width: 31.9375em) " maçlar.

<table class="plans" data-ng-class="vm.plan">

Ben bu vm.plan sınıf tabloya uygulanır görebilirsiniz medya sorgusuna oldukça genişliğinde sayfayı yüklemek ...

sorun olduğunda geçerli: Sonra şu var Sayfayı geniş bir genişlikte açın. Mobil cihazda yeniden boyutlandırdığımda, konsolda vm.plan'ın "ücretsiz" hale geldiğini görüyorum, böylece Eşleşme koşulu patlar ve vm.plan tanımlanır, ancak CSS sınıfı tabloya uygulanmaz.

GÜNCELLEME Ben sadece https://jsfiddle.net/g3wzayp3/11/ bir örnek eklendi

Sadece HTML önizleme bölmesini artırmak ve genişlik medya sorgusuyla eşleştiğinde konsola değer "true" üzerinde göreceksiniz ... Ama sınıf metne uygulanmaz ...

Herhangi bir fikir neden?

kaynak

2016-04-10 Miguel Moura

Deneyin

– Daniel

Sadece denedim ... Eşleşme yangınları ve vm.plan olsa bile pencereyi yeniden boyutlandırdığımda çalışmaz Doğru değeri alır ... –

@Miguel 'resize' etkinliğinde yayınlanmış" $ "(" eşleşme ") bilgisini öğrenebilir miyim? Bunu manuel olarak yapıyor musunuz? –

cevap

Yeniden boyutlandırmada "ücretsiz" adlı sınıfı uygulamaya mı çalışıyorsunuz? Evet ise, bunu yapmanın yolu bu değildir. vm.plan doğru veya yanlış

Örnek olur: {vm.plan ücretsiz}: ng sınıf gibi kullanılır

<div ng-class="{free: should_apply}">Hello</div>

Uygulamak istediğiniz sınıftır, should_apply bir değişkendir serbest olduğunu olarak değerlendirilen doğru veya

İşte keman örnek yanlış: https://jsfiddle.net/a7u1m3n6/

GÜNCELLEME:

ihtiyacınız $ on yönteminde $scope.$apply();'u aramak için. İşte keman - https://jsfiddle.net/g3wzayp3/12/

kaynak

2016-04-10 18:08:40

Her ikisini de denedim ... –

Bir örnek ekledim –

medya sorguları kullandığımda ork. Sormamdaki güncellemeyi ve https://jsfiddle.net/g3wzayp3/11/ adresindeki örneği kontrol edin. Konsolda "true" görüntülenene kadar önizleme bölmesinin genişliğini artırın. Bu, medya sorgusu eşleştirildiğinde değişken değerin değiştiği, ancak metnin CSS sınıfı üzerinde hiçbir etkisinin olmadığı anlamına gelir ve bunun nedenini bilmiyorum. –

İlgili konular