问题描述
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/...
问题解答
回答1:这个地方正确的方法不是去修改ng-hide而是应该把你画图表的方法封装成directive
回答2:ng-hide='true'回答3:
先赋值上去,ng-hide = false, 当单击或者某一事件时,ng-hide = true,同时重新渲染 chart图
回答4:感觉你用 ng-if 就可以解决
ng-if 是直接把这个东西从 DOM 中移除,而 ng-hide 只是用了 CSS 去把元素隐藏起来,而元素本身还是可以通过 DOM 节点找到的
回答5:之前遇到类似的问题,感觉ng-show/hide设置true/false之后,没有立即生效。试试这样。
$scope.isHide = true; $timeout(function(){drawChartTo(’chart-container’)})回答6:
<p ng-hide=’isHide’ class='header ng-hide'></p><p id='chart-container'></p>