javascript - AngularJS: header 标记破坏了 ngSwitch

Question

当我使用 <h3> 时在我的 html 中的 ngSwitch 内的标签，整个事情都坏了。

错误:[$compile:ctreq] 找不到指令“ngSwitchWhen”所需的 Controller “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>

Answer 1

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

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