NG风格不会动态刷新

Question

我有一个带有此代码的md-card：

<md-card ng-style="{ width: pageWidth > 900 ? '40vw' : '80vw' }">...</md-card>

pageWidth是绑定到$(window).width()的$scope变量。这是为此的代码：

$scope.pageWidth = $(window).width();
$(window).resize(() => {
    $scope.pageWidth = $(window).width();
    console.log('page width: ' + $scope.pageWidth);
})
$(document).ready(() => {
    $(window).resize(() => {
        $scope.pageWidth = $(window).width();
        console.log('page width: ' + $scope.pageWidth);
    })
})

页面加载时，该样式将正确应用，但当我手动调整页面大小时，样式不会正确。正如您在第二个代码块中看到的那样，我在处理程序中添加了console.log语句，因此我知道$scope.pageWidth正在使用我更改的每个宽度像素进行更新。但是，MD卡的宽度永远不会从一个变为另一个。这里发生了什么？

，在您将其标记为重复之前，人们以前曾问过，但没有以答案适用于我的情况。

Answer 1

对不起，我没有为此发布答案

<md-card ng-style="{ width: pageWidth > 900 ? '40vw' : '80vw' }">...</md-card>

但是，从我看到的事情来看，可以使用普通CSS更有效地完成工作 - 无需为此提供JavaScript逻辑。我也建议使用angularjs $ window（您需要注入它），而不是全局窗口对象，我反对在Angular应用程序和jQuery dom Manipulation中使用jQuery，除非确实确实如此（我会再说一次）。<<<<<<<</p>

检查有关媒体查询的链接：

https://developer.mozilla.org/en-us/docs/web/css/media_queries/using_media_queries

您会看到您可以轻松检查最大宽度和最大高点，也可以使用最小的宽度/高度以及大量不同的事情，这些内容可能可以解决纯CSS解决您的问题，并且不需要JavaScript/jQuery与Angularjs混合。<<<<<<<<<<<<<<<<<<

您的CSS将是：

@media screen and (max-width: 900px) {
  md-card {
    width: 80vw;
  }
}
@media screen and (min-width: 901px) {
  md-card {
    width: 40vw;
  }
}

当然，如果您需要在每个元素上更具体的添加类并更改媒体查询。