angular/angular.js — pull request #962 by mmoussa (2012-05-16 16:37:16+00:00)
Title: ngShow / ngHide directive should use display: 'inherit' instead of display: ''

Suppose you have an unordered list that is to be populated by a web service following a user request.

```html

{{item.property}} etc...

```

We only want to display this HTML if there is something to see, so we add ```ng-show="items.length > 0"``` to the ```

``` tag.

This won't get processed by until it is fully bootstrapped, so the user will see ```{{item.property}} etc...``` briefly on the page and then disappear once is fully loaded.

The user shouldn't see any of this until we have items to display, so ideally we'd do something like:

```css
.initially-hidden
{
display: none;
}
```

... and set ```class="initially-hidden"``` on our ```

``` element (or something to that extent).

This won't work, however, because ngShow/ngHide currently set ```display = ''``` for visibility which (at least in Chrome) causes the ```.initially-hidden``` class to take over and leave the element invisible even after ```items.length > 0```.

The current workaround is to set ```style="display: none;"``` on the ```

``` element, which isn't ideal because inline styles are "evil-ish" depending on who you ask.

Setting ```display = 'inherit'``` for the visible case instead allows a css class to be used to initially hide the element without affecting its future visibility.

Simplified jsfiddle example of the problem below. Just pretend ```ng-show="true"``` is actually ```ng-show="resultOfSomeWebserviceCall.length > 0"``` and ```Hello, world!``` is something you really don't want the user to see until that call is done.

http://jsfiddle.net/EXcmY/