In the development of the ANGULARJS framework, the page loads with the expression {{Express}}} or the filter {{Express | filter}} is flashed across the page. The problem is that when JavaScript is manipulating the DOM, the DOM structure is loaded to complete before the Angularjs file is processed. This is the cause of the expression or filter flashing on the page.
How do I solve the flicker caused by the loading sequence? ANGULARJS provides us with Ng-cloak, we can add ng-cloak where needed. Such as:
<body screen_capture_injected= "true" ng-controller= "Adminappctrl" ng-cloak> ......</div>
<ul ng-cloak>......</ul>
Ng-cloak implementation principle for a directive, page initialization is in the DOM Heade add a line of CSS code, as follows:
<pre class= "Prettyprint linenums" >
[Ng\:cloak],[ng-cloak], [Data-ng-cloak], [X-ng-cloak],. Ng-cloak,. x-ng-cloak{
Display:none! Important
}
</pre>
Angular sets the element with Ng-cloak to Display:none.
When the angular resolves to a ng-cloak node, the elements Ng-cloak and CALSS are removed at the same time, thus preventing the node from blinking. As follows:
<script type = "text/ng-template" id = "scenario.js-150"
It (' Should remove the template directive and CSS class ', function () {
Expect (Element ('. Doc-example-live # Template1 '). attr (' Ng-cloak '))
not (). tobedefined ();
Expect (Element ('. Doc-example-live #template2 '). attr (' Ng-cloak ')).
Not (). tobedefined ();
});
</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
