javascript - AngularJS: header 标签会破坏ngSwitch

当我在html的ngSwitch中使用<h3>标记时，整个过程都会中断。

错误：找不到指令'ngSwitchWhen'所需的[$ compile：ctreq]控制器'ngSwitch'！

例如，如果我将<h3>标记替换为<strong>标记，那么它将起作用。

您可以在此处尝试示例：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>

最佳答案

这是因为h3或div中的p在任何HTML标准中都是无效的。在这种情况下，如果在浏览器中使用inspect elements，则会发现h3自动关闭p，这会导致ngSwitch中断。

此处有更多详细信息：https://stackoverflow.com/a/4291608/1867608