PadaKatel PadaKatel - 5 months ago 40
AngularJS Question

AngularJS: Header tag breaks ngSwitch

When I use

<h3>
tags inside the ngSwitch in my html, the entire thing breaks.

Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!

If i replace the
<h3>
tag with a
<strong>
tag for example then it works.

You can try out the example here: http://jsfiddle.net/Lb8aatyz/1/

Html #1

<div ng-controller="MyCtrl">
<p data-ng-if="::type" data-ng-switch="type">
<span><h3>Account type:</h3></span>
<span data-ng-switch-when="facebook" class="ico-fb inline"></span>
<span data-ng-switch-when="google" class="ico-google inline"></span>
<span data-ng-switch-default="" class="ico-email inline"></span>
<span>{{ type }}</span>
</p>
</div>


Html #2

<div ng-controller="MyCtrl">
<p data-ng-if="::type" data-ng-switch="type">
<span><strong>Account type:</strong></span>
<span data-ng-switch-when="facebook" class="ico-fb inline"></span>
<span data-ng-switch-when="google" class="ico-google inline"></span>
<span data-ng-switch-default="" class="ico-email inline"></span>
<span>{{ type }}</span>
</p>
</div>

Answer

It is because the h3, or div inside a p is invalid in any HTML standard. In this case, if you use inspect elements in the browser, you will find the h3 closes p automatically, which makes ngSwitch breaks.

More details here: http://stackoverflow.com/a/4291608/1867608