AngularJS: Header tag breaks ngSwitch

Question

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>

It seems like all the block level tags beside headers break ngSwitch(p and div for example). — Raidok, Jul 04 '16 at 10:34

score 4 · Accepted Answer · edited May 23 '17 at 12:16

4

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: https://stackoverflow.com/a/4291608/1867608

edited May 23 '17 at 12:16

Community

1
1

answered Jul 04 '16 at 10:55

Kroderia

623
4
15

score 1 · Answer 2 · answered Jul 04 '16 at 12:13

The solution is here:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div data-ng-if="type" data-ng-switch="type">
        <h3>Account Type:</h3>
        <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>
    </div>
</div>


var myApp = angular.module('myApp', []);

myApp.config(function($controllerProvider) {
    $controllerProvider.allowGlobals();
});

myApp.controller('MyCtrl', function($scope) {
    $scope.type = "email";
});

You can not use block element inside inline tag and there is no need to use :: before type in the ng-if and you can also use ng- instead of data-ng-

score 0 · Answer 3 · answered Jul 04 '16 at 10:37

0

It seems like replacing the p tag with div resolves the problem but unfortunately I cannot explain this..

answered Jul 04 '16 at 10:37

Raidok

774
8
19

score -1 · Answer 4 · edited May 23 '17 at 12:16

-1

You can not use a block element (h3 tag) inside an inline tag (span).
See this: h1 and the span

edited May 23 '17 at 12:16

Community

1
1

answered Jul 04 '16 at 10:20

Nderim

9
1
3

Hey, you are right about the tags, but unfortunately this doesn't seem to be the cause of the problem in this case. Even if I take out the (span) tag or switch them around (put span inside h3) it still has the same issue. – PadaKatel Jul 04 '16 at 10:29

AngularJS: Header tag breaks ngSwitch

4 Answers4