AngularJS Directive Not Contained In Parent Element

Question

Im trying to create a basic directive that puts an image on the page. The image is contained in a

tag that may or may not be shown depending on a ng-show value. so, something like

<p ng-show="showImage">
  <imageDir></imageDir>
</p>

The directive works fine, but it never actually stays within the

tag, and it will be shown all the time, regardless of the value of showImage

Can anyone tell me why?

Here's a plunkr that shows the issue http://plnkr.co/edit/gPXezknXe2mBYztm9QO2?p=preview

"The P element represents a paragraph. It cannot contain block-level elements (including P itself)." reference — Danny
– Danny, Commented Dec 6, 2013 at 19:58

artur grzesiak · Accepted Answer · 2013-12-06 20:01:14Z

1

Just change <p> to <div> and it works fine: plnkr.

<p> only accepts so called phrasing content and your directive -- for obvious reasons -- does not belong to this group. So browser just put it outside of the <p>.

edited Dec 6, 2013 at 20:01

answered Dec 6, 2013 at 19:54

artur grzesiak

20.9k5 gold badges49 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivan Chernykh · Accepted Answer · 2013-12-06 19:55:27Z

1

The reason is: putting a div in a p causes invalid markup. Use inline tag instead , like span for example:

<p ng-show="false">
    <span gravatar email-hash="09s7dvywoifhowvw5"></span>
</p>

Working: http://plnkr.co/edit/VSKq02?p=preview

answered Dec 6, 2013 at 19:55

Ivan Chernykh

42.2k13 gold badges136 silver badges148 bronze badges

2 Comments

Cheyne Over a year ago

Thanks guys both these answers worked .. Wish I could select two answers though

Ivan Chernykh Over a year ago

@Cheyne it is ok , i'm not chasing for reputation :)

Collectives™ on Stack Overflow

AngularJS Directive Not Contained In Parent Element

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related