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()将其返回值分配给范围变量，这一点很重要。如果不这样做，它只会被评估一次，如果调整窗口大小或移动设备是侧向转动，它将不会更新。

Answer 2

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

例如：

 public async Task<IActionResult> Create([Bind("EndorsementId,FileName,ProviderId,Title")] Endorsement endorsement, IFormFile formFile)
    {
        if (ModelState.IsValid)
        {
            ...
            var data = new MemoryStream();

            formFile.CopyTo(data);
            var buf = new byte[data.Length];
            data.Read(buf, 0, buf.Length);

            UploadToAzure(data);

            ...

文档：

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

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

2 个答案: