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

Question

Angular ng-hide 怎麼立即生效？
我需要在設定完$scope.isHide，ng-hide生效後，才執行controller里之後的程式碼，例如根據容器高寬畫圖表。

沒在dom上隱藏就畫圖表，會導致圖表高度錯誤。

直接用jquery隱藏是可以解決，angular怎麼搞？

html

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

這個地方正確的方法不是去修改ng-hide
而是應該把你畫圖表的方法封裝成directive

Answer 2

雷雷

Answer 3

先賦值上去，ng-hide = false, 當單擊或某一事件時，ng-hide = true,同時重新渲染 chart圖

Answer 4

感覺你用 ng-if 就可以解決

ng-if 是直接把这个东西从 DOM 中移除，而 ng-hide 是直接把這個東西從 DOM 中移除，而 ng-hide 只是用了 CSS 去把元素隱藏起來，而元素本身還是可以透過 DOM 節點找到的

Answer 5

之前遇到類似的問題，感覺ng-show/hide設定true/false之後，沒有立即生效。試試這樣。

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

Answer 6