ng-style 不动态刷新
ng-style not refreshing dynamically
我有一个 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 卡的宽度永远不会从一个变为另一个。这是怎么回事?
在您将其标记为重复之前,人们之前已经问过这个问题,但他们的回答并不适用于我的情况。
抱歉,我不会发布此问题的答案,否则您在第一行中的错字应该是:
<md-card ng-style="{ width: pageWidth > 900 ? '40vw' : '80vw' }">...</md-card>
但据我所知,使用普通 CSS 可以更有效地完成您正在做的事情 - 无需为此添加 javascript 逻辑。另外我建议使用 AngularJS $window (你需要注入它)而不是全局 window 对象,我反对在 [=32= 中使用 Jquery ] 应用程序和 Jquery DOM 操作,除非真的(我会再说一遍)真的有必要。
检查此 link 关于媒体查询:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
你会发现你可以很容易地检查最大宽度和最大高度,还有 min-width/height 和大量不同的东西,它们可以用纯 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 元素上全局使用,在每个元素上添加 类 并更改媒体查询。
我有一个 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 卡的宽度永远不会从一个变为另一个。这是怎么回事?
在您将其标记为重复之前,人们之前已经问过这个问题,但他们的回答并不适用于我的情况。
抱歉,我不会发布此问题的答案,否则您在第一行中的错字应该是:
<md-card ng-style="{ width: pageWidth > 900 ? '40vw' : '80vw' }">...</md-card>
但据我所知,使用普通 CSS 可以更有效地完成您正在做的事情 - 无需为此添加 javascript 逻辑。另外我建议使用 AngularJS $window (你需要注入它)而不是全局 window 对象,我反对在 [=32= 中使用 Jquery ] 应用程序和 Jquery DOM 操作,除非真的(我会再说一遍)真的有必要。
检查此 link 关于媒体查询:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
你会发现你可以很容易地检查最大宽度和最大高度,还有 min-width/height 和大量不同的东西,它们可以用纯 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 元素上全局使用,在每个元素上添加 类 并更改媒体查询。