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