Javascript AngularJS:标题标记打断了ngSwitch

当我在html的ngSwitch中使用

标记时，整个过程都会中断

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

例如，如果我将

标记替换为

标记，那么它就可以工作

您可以在此处尝试以下示例：

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>

帐户类型：
{{type}}

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>

账户类型：
{{type}}

不能在内联标记（span）内使用块元素（h3标记）。

---

看到这个：

用

div

替换

p

标签似乎可以解决问题，但不幸的是，我无法解释这一点。

这是因为

p

中的

h3

或

div

在任何HTML标准中都是无效的。在这种情况下，如果在浏览器中使用

inspect elements

，您会发现

h3

自动关闭

p

，这会使开关断开

更多详细信息请参见：

解决方案如下：

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

帐户类型：
{{type}}
var myApp=angular.module（'myApp'，[]）；
myApp.config（函数（$controllerProvider）{
$controllerProvider.allowGlobals（）；
});
myApp.controller（'MyCtrl'，函数（$scope）{
$scope.type=“电子邮件”；
});

---

您不能在内联标记中使用block元素，也不需要在ng if中使用：：before type，您还可以使用ng-而不是数据ng-

嘿，您对标记的看法是正确的，但不幸的是，这似乎不是本例中问题的原因。即使我取出（span）标记或将其切换（将span放在h3中），它仍然存在相同的问题。看起来头旁边的所有块级标记都会中断ngSwitch（例如，p和div）。