你可以使用ng-if作为显示尺寸

Question

是否可以使用ng-if非常简单地不为较小的屏幕尺寸加载元素？

Answer 1

您可以使用角度匹配媒体.

在控制器中,您可以创建与屏幕大小相对应的变量.例如,将以下内容添加到您的控制器:

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

然后在HTML中,您可以使用ngIf或采用Angular表达式的类似指令来显示或隐藏内容:

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

此特定示例非常适合仅在台式计算机上加载大量不必要的图像.

注意:如果您计划使用screensize.is()in指令将其返回值赋给范围变量,这一点很重要.如果不这样做,则只会评估一次,如果窗口调整大小或移动设备侧向转动,则不会更新.

Answer 2

ng-if的替代方案是,如果您使用Angular Material作为布局,则它们会提供指令隐藏和显示,以根据屏幕大小控制元素的可见性.

例如:

<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>

文档:

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