Remove Element from DOM before getting rendered with an angularjs directive

Question

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

• should remove elements based on the passed attribute value
• should remove before getting rendered
• should remove all child elements
• should visually work like ng-if in combination with ng-bind

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!

Answer 1

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>

Answer 2

ng-bind是在运行时绑定元素的理想方法。有关此应用的更多信息，请访问如何删除Angular js中的All子元素 。