NG-风格不刷新动态

问题描述：

我有一个md-card与此代码：NG-风格不刷新动态

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

pageWidth是$scope变量绑定到$(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语句，所以我知道$scope.pageWidth正在更新，每更改一个宽度的像素。但是，md卡的宽度不会从一个变为另一个。这里发生了什么？

并且在您将此标记为重复项之前，人们之前已经询问过此问题，但未以其答案适用于我的情况。

尝试在scope.apply（）中包装调整大小 –

答

对不起，我没有张贴此以外的答案，然后你必须在第一行输入错误应该是：

<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混合使用。

你的CSS会是这样的：

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

当然，这将是全球范围内对所有MD卡的元素，如果你需要它的每个元素的更多具体的类添加和改变介质的查询。

NG-风格不刷新动态

相关推荐