angular.js - An Angularjs pitfall

Question

Scenario 1:

 var p_NormalStatus = document.getElementById("NormalStatus");//p1
 var p_LockStatus = document.getElementById("LockStatus");//p2

 function getData(){  
    p_NormalStatus.style.display = "none";//1
    p_LockStatus.style.display = "block";//2
 }

When the page is loaded for the first time, there is no problem in executing the getData function.
After returning, code 1 and 2 are executed, but both p's are displayed, which means the code does not work;

Scenario 2:

 function getData(){  
    document.getElementById("NormalStatus").style.display = "none";//1
    document.getElementById("LockStatus").style.display = "block";//2
 }

That’s ok!

Could you please explain why this happens? !

Answer 1

In scenario 1, when codes 1 and 2 are executed, the page has not loaded the two DOM objects, and then cached two empty DOM objects. Naturally, there will be no value when executing getData. Moreover, your problem has nothing to do with angularjs. , do I still need to write like you do when using ng?

Answer 2

First of all, when you encounter a problem, you need to interrupt and check what is causing it.
Then, use classes to change the style instead of redrawing intermittently.
Finally, the specific problem and the specific environment include your loading method function. Execution environment