標籤嵌套的問題

問題描述

期待樣式：

單一精確度顯示：「精確度等級：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標籤中不能嵌套塊級元素。這些咱們可能都或多或少據說過，可是咱們只是把它當作一種規範。

經過此事，我懂得，規範，不僅是規範，那是前人對後人的忠告。有規範，咱們能夠避免一些沒必要要的錯誤。