How does Angular ng-hide take effect immediately?
I need to set $scope.isHide and ng-hide take effect before executing the subsequent code in the controller, such as drawing a chart based on the height and width of the container.
Drawing a chart without hiding it on the dom will cause the height of the chart to be wrong.
It can be solved by hiding it directly with jquery. How to do it with angular?
html
<p class="container">
<p ng-hide='isHide' class="header"></p>
<p id="chart-container"></p>
</p>
controller
$scope.isHide = true; //After it needs to take effect, that is, hide the header and then execute downwards
drawChartTo('chart-container');
Using flex layout, after the header is hidden, the chart-container will be higher. drawChartTo draws a chart based on this height
The following is a demo and basic repair method to prove this problem:
https://jsfiddle.net/q7t0d2q3/
After searching, I found that it involves the related operating principles of angularjs $digest. To fix this problem, one is to directly wait for the DOM to be rendered before drawing the chart, and the other is to let the chart sense the height change of the chart-container and automatically resize. In the final analysis, it is a synchronization and asynchronous problem.
Related information:
http://tech.endeepak.com/blog...
https://blog.brunoscopelliti....
http://angular-tips.com/ blog/...
6
0
0
The correct way here is not to modify ng-hide
but to encapsulate your method of drawing charts into a directive
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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
