CODEWITHSUNDEEP
javascriptangularjsdomangularjs-directive
fheck
fheck

Reputation: 280

Remove Element from DOM before getting rendered with an angularjs directive

I'm looking for a way to build a direcive for the following demands:

Or to say it in another way: the elements should be removed after the initial page load and before the element get rendered, so that the user will not see the element "blinking". Is there a way without using ng-bind?

ng-bind is not always very helpful:

<parent my-directive>
    <child ng-bind="Hi"></child>
</parent>

.parent {
     background-color: red;
     padding: 50px;
}

Thanks a lot & best regards!

Upvotes: 0

Views: 844

Answers (2)

Justinjs
Justinjs

Reputation: 140

ng-bind is the perfect way to bind element at run time.For more spotlight on this visit how to remove All child element in Angular js.

Upvotes: 0

Abhilash Augustine
Abhilash Augustine

Reputation: 4208

If my assumption is correct, you can use ng-cloak to stop the blinking caused by the angular compiler.

<parent ng-cloak>
    <child ng-bind="Hi"></child>
</parent>

Explanation

All elements which contains ng-cloak will be hide initially and it will be visible only after completing angular's compilation.

If you add ng-cloak to your body tag, then all page will be hide and be visible only after angular's compilation.

Update

<header ng-cloak ng-app>
  <h1 ng-cloak ng-if="false" style="background-color: red">  
    <span>TEST</span>
  </h1> 
</header>

Upvotes: 2

Related Questions