angle.js - Angular ng-hide를 즉시 적용하는 방법은 무엇입니까?

Question

Angular ng-hide는 어떻게 즉시 적용되나요?
컨테이너의 높이와 너비를 기준으로 차트를 그리는 등 컨트롤러에서 후속 코드를 실행하기 전에 $scope.isHide 및 ng-hide가 적용되도록 설정해야 합니다.

돔에 숨기지 않고 차트를 그리면 차트 높이가 맞지 않게 됩니다.

jquery로 직접 숨겨서 해결할 수 있는데 어떻게 해야 할까요?

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

controller
$scope.isHide = true; //적용이 필요한 후, 즉 헤더를 숨긴 후 아래쪽으로 실행
drawChartTo('chart-container');

플렉스 레이아웃을 사용하면 헤더가 숨겨진 후 차트 컨테이너가 더 높아집니다. drawChartTo는 이 높이를 기준으로 차트를 그립니다

다음은 이 문제를 증명하기 위한 데모 및 기본 복구 방법입니다.
https://jsfiddle.net/q7t0d2q3/

검색해 보니 Angularjs $digest의 관련 운영 원리와 관련이 있는 것으로 나타났습니다. 이 문제를 해결하려면 하나는 차트를 그리기 전에 DOM이 렌더링될 때까지 직접 기다리는 것이고, 다른 하나는 차트가 차트 컨테이너의 높이 변화를 감지하여 자동으로 크기를 조정하도록 하는 것입니다. 최종 분석에서는 동기화 및 비동기 문제입니다.

관련 정보:
http://tech.endeepak.com/blog...
https://blog.brunscopelliti....
http://angular-tips.com/ 블로그/...

Answer 1

여기서 올바른 방법은 ng-hide
를 수정하는 것이 아니라 차트를 그리는 방법을 지시어로 캡슐화하는 것입니다

Answer 2

으아악

Answer 3

먼저 ng-hide = false 값을 할당하고 클릭하거나 특정 이벤트가 발생하면 ng-hide = true 값을 할당하고 동시에 차트를 다시 렌더링합니다

Answer 4

ng-if를 이용하시면 해결하실 수 있을 것 같아요ng-if 就可以解决

ng-if 是直接把这个东西从 DOM 中移除，而 ng-hide

ng-if는 DOM에서 이 항목을 직접 제거하는 반면, ng-hide는 CSS를 사용하여 요소를 숨기고 요소 자체는 여전히 DOM 노드를 통해 액세스할 수 있습니다. 발견 🎜

Answer 5

이전에 비슷한 문제가 발생했습니다. ng-show/hide를 true/false로 설정한 후 즉시 적용되지 않는 것 같았습니다. 이것을 시도해 보세요.

으아아아

Answer 6

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