angular.js - Angular ng-hide 怎么立即生效?
巴扎黑
巴扎黑 2017-05-15 17:12:30
0
6
709

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/...

巴扎黑
巴扎黑

reply all(6)
黄舟

The correct way here is not to modify ng-hide
but to encapsulate your method of drawing charts into a directive

曾经蜡笔没有小新
 ng-hide="true"
PHPzhong

Assign the value first, ng-hide = false, when clicked or a certain event occurs, ng-hide = true, and re-render the chart at the same time

巴扎黑

I feel like you can solve it by using ng-if

ng-if 是直接把这个东西从 DOM 中移除,而 ng-hide is to directly remove this thing from the DOM, while ng-hide just uses CSS to hide the element, and the element itself can still be found through DOM nodes

给我你的怀抱

I encountered a similar problem before. I felt that after ng-show/hide was set to true/false, it did not take effect immediately. Try this.

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

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!