angular.js - Angular ng-hide 怎么立即生效？

Question

Angular ng-hide 怎么立即生效？
我需要在设置完$scope.isHide，ng-hide生效后，才执行controller里之后的代码，比如根据容器高宽画图表。

没在dom上隐藏就画图表，会导致图表高度错误。

直接用jquery隐藏是可以解决，angular怎么搞？

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

controller
$scope.isHide = true; //需要生效后，即隐藏后header后往下执行
drawChartTo('chart-container');

采用flex布局，header隐藏后，chart-container就会更高。drawChartTo根据这个高度画图表

以下是证明这个问题的demo及基本修复方法：
https://jsfiddle.net/q7t0d2q3/

搜索后发现涉及angularjs $digest相关运行原理。修复这个问题，一是直接等dom渲染完后画图表，二是让图表感知到chart-container高度变化而自动resize。说到底是个同步异步问题。

相关资料：
http://tech.endeepak.com/blog...
https://blog.brunoscopelliti....
http://angular-tips.com/blog/...

Answer 1

Cara yang betul di sini bukanlah untuk mengubah suai ng-hide
tetapi untuk merangkum kaedah anda melukis carta ke dalam arahan

Answer 2

 ng-hide="true"

Answer 3

Tetapkan nilai dahulu, ng-hide = palsu, apabila diklik atau peristiwa tertentu berlaku, ng-hide = benar, dan tunjukkan semula carta pada masa yang sama

Answer 4

Saya rasa anda boleh menyelesaikannya dengan menggunakan ng-ifng-if 就可以解决

ng-if 是直接把这个东西从 DOM 中移除，而 ng-hide

ng-if secara langsung mengalih keluar perkara ini daripada DOM, manakala ng-hide hanya menggunakan CSS untuk menyembunyikan elemen, dan elemen itu sendiri masih boleh diakses melalui Nod DOM dijumpai 🎜

Answer 5

Saya menghadapi masalah yang sama sebelum ini Saya merasakan bahawa selepas ng-show/hide ditetapkan kepada benar/salah, ia tidak berkuat kuasa serta-merta. Cuba ini.

$scope.isHide = true; 
$timeout(function(){drawChartTo('chart-container')})

Answer 6

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