ng-style 不动态刷新答案

【问题标题】：ng-style not refreshing dynamicallyng-style 不动态刷新
【发布时间】：2017-10-05 15:39:35
【问题描述】：

我有一个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 卡的宽度永远不会从一个更改到另一个。这是怎么回事？

在你将其标记为重复之前，人们之前已经问过这个问题，但他们的答案并不适用于我的情况。

【问题讨论】：

尝试将调整大小包含在 scope.apply() 中

标签： angularjs ng-style angularjs-material

【解决方案1】：

对不起，我没有为此发布答案，否则您在第一行有错字应该是：

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

但据我所知，使用普通 CSS 可以更有效地完成您正在做的事情 - 无需为此添加 javascript 逻辑。另外我建议使用 AngularJS $window （你需要注入它）而不是全局窗口对象，我反对在 Angular 应用程序和 Jquery DOM 操作中使用 Jquery，除非它真的（我会再说一遍）真的有必要。

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

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

当然，如果您需要更具体地在每个元素上添加类并更改媒体查询，这将在所有 md-card 元素上全局使用。

【讨论】：