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卡的寬度不會從一個變爲另一個。這裏發生了什麼？

並且在您將此標記爲重複項之前，人們之前已經詢問過此問題，但未以其答案適用於我的情況。

來源

2017-10-04 Romulus3799

嘗試在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卡的元素，如果你需要它的每個元素的更多具體的類添加和改變介質的查詢。

來源

2017-10-04 23:50:23 pegla

NG-風格不刷新動態

回答

相關問題