angularjs - 你能用 ng-if 来显示尺寸吗

Question

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

Answer 1

您可以使用 angular-match-media为此。

在您的 Controller 中，您可以创建与屏幕尺寸相对应的变量。例如，将以下内容添加到您的 Controller 中:

// 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 指令将其返回值分配给作用域变量。如果不这样做，它只会被评估一次，并且不会在调整窗口大小或移动设备侧向时更新。