ngのスタイルを動的

Question

をリフレッシュしていない私はこのコードでmd-cardを持っている：

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

pageWidthは$(window).width()にバインド$scope変数です。

ページの読み込み時にスタイルが正しく適用されますが、手動でページのサイズを変更したときは正しく適用されません。 2番目のコードブロックでわかるように、ハンドラにconsole.logステートメントを追加しました。したがって、$scope.pageWidthは、幅が変更されたピクセルごとに更新されています。しかし、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の問題とAngularJSと混在するJavascript/Jqueryの必要はありません。

あなたのCSSは次のようなものになるだろう：あなたは、各要素のそれより具体的な追加クラスを必要とし、メディアクエリを変更した場合、これはすべてのMD-カード要素でグローバルになります。もちろん、

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

。