AngularJS: Header-Tag bricht ngSwitch

Question

Wenn ich <h3> Tags innerhalb der ngSwitch in meinem HTML verwenden, bricht die ganze Sache.

Fehler: [$ compile: ctreq] Controller 'ngSwitch', benötigt durch Direktive 'ngSwitchWhen', kann nicht gefunden werden!

Wenn ich zum Beispiel das <h3> Tag durch ein <strong> Tag ersetzen, dann funktioniert es.

Sie können hier das Beispiel ausprobieren: 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 1

Es ist, weil die h3 oder div innerhalb eines p in jedem HTML ungültig Standard. Wenn Sie in diesem Fall inspect elements im Browser verwenden, werden Sie feststellen, dass h3 automatisch p schließt, wodurch ngSwitch unterbrochen wird.

Weitere Details hier: https://stackoverflow.com/a/4291608/1867608

Answer 2

Sie kein Blockelement verwenden (h3 tag) innerhalb eines Inline-Tags (span).
sehen: h1 and the span

Answer 3

Es ist wie Ersetzen des mit divp Tag scheint löst das Problem aber leider kann ich das nicht erklären ..

Answer 4

Die Lösung ist hier:

<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"; 
}); 

Sie können nicht Blockelement innerhalb Inline-Tag verwenden, und es gibt keine Notwendigkeit, vor Typ verwenden :: im ng-if und Sie können auch ng- anstelle von Daten-ng- verwenden