È possibile utilizzare ng-if per le dimensioni dello schermo

Question

È possibile utilizzare ng-if per non caricare molto semplicemente un elemento per schermi di dimensioni inferiori?

Answer 1

Un'alternativa a ng-if, è che se si utilizza il materiale angolare per il layout, forniscono direttive nascoste e visualizzate per controllare la visibilità degli elementi in base alle dimensioni dello schermo.

Ad esempio:

<div hide-gt-sm>You'll only see me on small screens</div> 
<div show-gt-lg>You'll only see me on big screens</div> 

Documenti:

https://material.angularjs.org/latest/layout/options

Answer 2

È possibile utilizzare angular-match-media per questo.

Nel controller è possibile creare variabili che corrispondono alle dimensioni dello schermo. Per esempio aggiungere il seguente al controllore:

// Using static method `is` 
angular.module('myApp', ['matchMedia']) 
.controller('mainController', ['screenSize', function(screenSize) { 
    $scope.isScreenSize = screenSize.is; 
}]); 

Poi, nel tuo HTML è possibile mostrare o nascondere contenuti utilizzando ngIf o simili direttive che assumono un'espressione angolare:

<img ng-if="isScreenSize('md, lg')" ng-src='http://example.com/path/to/giant/image.jpg'> 

Questo particolare esempio è grande per caricare solo immagini grandi e non necessarie sui computer desktop.

Nota: è importante se si prevede di utilizzare screensize.is() nelle direttive per assegnare il valore restituito a una variabile con ambito. Se non lo fai, verrà valutato una volta sola e non verrà aggiornato se la finestra viene ridimensionata o se un dispositivo mobile viene ruotato di lato.