标签嵌套的问题

问题描述

期待样式：

单一精确度显示：“精确度等级：xxxxx”

非单一精确度显示：“精确度等级：xxxxx ~ xxxxx”

错误实现

下面是错误的示范，仅供说明使用：

<p ng-repeat="parameter in object.parameterCalibrateAbilitySet">
    <p ng-if="parameter.parameterCategory.singleAccuracyOrNot">
        准确度等级：{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name }}
    </p>
    <p ng-if="!parameter.parameterCategory.singleAccuracyOrNot">
        准确度等级：{{ parameter.accuracy.minAccuracyValue + parameter.accuracy.minAccuracyUnit.name + ' ~ ' + parameter.accuracy.maxAccuracyValue + parameter.accuracy.maxAccuracyUnit.name }}
    </p>
</p>

看代码感受没问题，可是渲染出来是这么个东西，没有数据。

缘由分析

打开控制台，看咱们的DOM结构，发现咱们原来的嵌套p标签被渲染为3个独立的p标签。

因此看结构，咱们的准确度等级不在ng-repeat修饰的p标签中，因此没法获取数据，就会显示错误。

渲染猜测

如下均为我的猜测，若是错误欢迎批评指正。

假如咱们写了一个嵌套的p标签，因p标签不能嵌套块级元素。

因此浏览器渲染到第二行时，发现了一个块级元素，会认为第一行的p标签已经完结了，因此浏览器认为是开发者少写了一个p的结束标签。

同理，最后，浏览器会认为开发者少写了一个p的开始标签。

因此最后会呈现出如上图所示的DOM结构。

总结

归根结底，就是p标签中不能嵌套块级元素。

内联元素不能嵌套块级元素，p标签中不能嵌套块级元素。这些咱们可能都或多或少据说过，可是咱们只是把它当作一种规范。

经过此事，我懂得，规范，不仅是规范，那是前人对后人的忠告。有规范，咱们能够避免一些没必要要的错误。