angular.js - Bagaimana untuk menjadikan Angular ng-hide berkuat kuasa serta-merta?

Question

Bagaimanakah Angular ng-hide berkuat kuasa serta-merta?
Saya perlu menetapkan $scope.isHide dan ng-hide berkuat kuasa sebelum melaksanakan kod seterusnya dalam pengawal, seperti melukis carta berdasarkan ketinggian dan lebar bekas.

Melukis carta tanpa menyembunyikannya pada dom akan menyebabkan ketinggian carta menjadi salah.

Ia boleh diselesaikan dengan menyembunyikannya terus dengan jquery. Bagaimana untuk melakukannya dengan sudut?

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

pengawal
$scope.isHide = true; //Selepas ia perlu berkuat kuasa, iaitu, sembunyikan pengepala dan kemudian laksanakan ke bawah
drawChartTo('cart-container');

Menggunakan reka letak fleksibel, selepas pengepala disembunyikan, bekas carta akan menjadi lebih tinggi. drawChartUntuk melukis carta berdasarkan ketinggian ini

Berikut ialah demo dan kaedah pembaikan asas untuk membuktikan masalah ini:
https://jsfiddle.net/q7t0d2q3/

Selepas mencari, saya mendapati bahawa ia melibatkan prinsip pengendalian angularjs $digest yang berkaitan. Untuk menyelesaikan masalah ini, satu adalah dengan terus menunggu DOM untuk diberikan sebelum melukis carta, dan yang lain adalah untuk membiarkan carta merasakan perubahan ketinggian bekas carta dan mengubah saiz secara automatik. Dalam analisis akhir, ia adalah masalah penyegerakan dan tak segerak.

Maklumat berkaitan:
http://tech.endeepak.com/blog...
https://blog.brunoscopelliti....
http://angular-tips.com/ blog/...

Answer 1

Cara yang betul di sini bukanlah untuk mengubah suai ng-hide
tetapi untuk merangkum kaedah anda melukis carta ke dalam arahan

Answer 2

 ng-hide="true"

Answer 3

Tetapkan nilai dahulu, ng-hide = palsu, apabila diklik atau peristiwa tertentu berlaku, ng-hide = benar, dan tunjukkan semula carta pada masa yang sama

Answer 4

Saya rasa anda boleh menyelesaikannya dengan menggunakan ng-ifng-if 就可以解决

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

ng-if secara langsung mengalih keluar perkara ini daripada DOM, manakala ng-hide hanya menggunakan CSS untuk menyembunyikan elemen, dan elemen itu sendiri masih boleh diakses melalui Nod DOM dijumpai 🎜

Answer 5

Saya menghadapi masalah yang sama sebelum ini Saya merasakan bahawa selepas ng-show/hide ditetapkan kepada benar/salah, ia tidak berkuat kuasa serta-merta. Cuba ini.

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

Answer 6

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