angular.js - Angular ng-hide をすぐに有効にする方法は?

Question

Angular ng-hide はどのようにしてすぐに有効になりますか?
$scope.isHide を設定する必要があり、コンテナの高さと幅に基づいてチャートを描画するなど、コントローラーで後続のコードを実行する前に ng-hide が有効になります。

チャートをダムに隠さずに描くとチャートの高さが狂います。

jqueryで直接非表示にすることで解決できます。angularで行うにはどうすればよいですか?

html
<p class="container">
<p ng-hide='isHide' class="header"></p>
<p id="チャートコンテナ"></p>
</p>

controller
$scope.isHide = true; //有効にする必要がある後、つまりヘッダーを非表示にしてから下方向に実行します
drawChartTo('chart-container');

フレックス レイアウトを使用すると、ヘッダーが非表示になった後、チャート コンテナーがより高くなります。 drawChartこの高さに基づいてグラフを描画します

以下は、この問題を証明するためのデモと基本的な修復方法です:
https://jsfiddle.net/q7t0d2q3/

検索した結果、これには angularjs $digest の関連動作原理が含まれていることがわかりました。この問題を解決するには、1 つはチャートを描画する前に DOM がレンダリングされるのを直接待つこと、もう 1 つはチャートにチャート コンテナーの高さの変化を感知させ、自動的にサイズを変更させることです。最終的には、これは同期と非同期の問題です。

関連情報:
http://tech.endepak.com/blog...
https://blog.brunscopelliti....
http://angular-tips.com/ブログ/...

Answer 1

ここでの正しい方法は、ng-hide を変更するのではなく
、チャートを描画するメソッドをディレクティブにカプセル化することです

Answer 2

リーリー

Answer 3

最初に値を割り当て、ng-hide = false、クリックまたは特定のイベントが発生した場合、ng-hide = true、そして同時にチャートを再レンダリングします

Answer 4

ng-ifを使えば解決できる気がします

はこれを DOM から直接削除することですが、ng-hide は CSS を使用して要素を非表示にするだけであり、要素自体は DOM ノードを通じて引き続き見つけることができますng-if 是直接把这个东西从 DOM 中移除，而 ng-hide

Answer 5

以前、同様の問題に遭遇しましたが、ng-show/hide を true/false に設定した後、すぐに有効にならないと感じました。これを試してみてください。

リーリー

Answer 6

<p ng-hide='isHide' class="header ng-hide"></p>
<p id="chart-container"></p>