Question

我有md-card代码：

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

pageWidth是绑定到$scope的{{1}}变量。这是代码：

$(window).width()

在页面加载时正确应用样式，但在手动调整页面大小时则不能。正如您在第二个代码块中看到的，我向处理程序添加了$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正在更新，每个像素的宽度都会改变。但是，md卡的宽度永远不会从一个变为另一个。这是怎么回事？

在您将此标记为重复之前，人们之前已经问过这个问题，但不是以他们的答案适用于我的情况的方式。

Answer 1

很抱歉，我没有为此发布答案，然后您在第一行输入错误应该是：

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

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

您将看到，您可以轻松检查最大宽度和最大高度，最小宽度/高度以及可能解决纯CSS问题的不同事物，并且不需要将Javascript / Jquery与AngularJS混合使用。< / p>

你的CSS会是这样的：

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

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

ng-style不动态刷新

1 个答案: