angular.js - How to make Angular ng-hide take effect immediately?

Question

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

Answer 1

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

Answer 2

 ng-hide="true"

Answer 3

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

Answer 4

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

Answer 5

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')})

Answer 6

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