Wie können Kopf- und Fußzeilen in angularjs abhängig von der Fensterbreite bedingt ein- und ausgeblendet werden?

Question

Ich habe es mit Kopf- und Fußzeilen in angularjs zu tun. Ich habe verschiedene Header für mobile Ansicht und Webview. Wie behandle ich Header in angularjs abhängig von der Fensterbreite bedingt.

Im Moment mache ich das mit jquery wie folgt:

if (window.matchMedia('(max-width: 768px)').matches) { 
//hidewebheader; 
//show mobileheader; 
} else { 
    //hidemobileheader; 
    //showwebheader; 
} 

Wie erreiche ich dies in AngularJS. Es gibt eine Datei von header.html, die zwei verschiedene Markups für Web- und Mobile-Header hat.

Answer 1

inject $ window. Ich weiß, dass es $ window.innerHeight gibt, also glaube ich, dass es $ window.innerWidth gibt (habe es nicht versucht). Verwenden Sie $ scope. $ Achten Sie auf die Breite und verwenden Sie ng-if, um zu entscheiden, welche Kopfzeile Sie gerade anzeigen.

Übrigens, wir verwenden bootstrap und es gibt einen guten Weg, es dort mit css nur Lösung zu tun. Ich denke Bootstrap verwendet @media hinter der Szene. Ich bin nicht sicher, dass Sie angular oder js für Ihr Problem verwenden müssen. benutze CSS.