Angularjs 未加载的标题标签导致闪烁

我有以下代码：

<div ng-cloak ng-init="viewAlbum()" class="ng-cloak">


<h3 ng-cloak class="ng-cloak" ng-bind="album.Title"></h3>    


<table ng-cloak class="ng-cloak">

    <tr>
        <td class="label-col"><span class="album-label">Composer</span></td>
        <td class="value-col">{{album.Composer}}</td>
    </tr>

    <tr>
        <td class="label-col"><span class="album-label">Release Year</span></td>
        <td class="value-col">{{album.ReleaseYear}}</td>
    </tr>

    <tr>
        <td class="label-col"><span class="album-label">Rating</span></td>
        <td class="value-col">{{album.Rating}}</td>
    </tr>

    <tr>
        <td class="label-col"><span class="album-label">Reviews</span></td>
        <td class="value-col">
            <ol>
                <li ng-repeat="review in album.Reviews">{{review.Text}}</li>
            </ol>
        </td>
    </tr>


</table>

作曲家
{{album.Composer}
发布年份
{{album.ReleaseYear}
评级
{{album.Rating}
评论
{{review.Text}

问题是，当页面加载时，我看到快速闪烁。我没有看到未经处理的原始角度代码。相反，整个表会闪烁，包括静态文本（如标签）

我做了一些实验——当我移除

H3

标记时，我不再看到闪烁。因此，我相信现在发生的是

H3

标记最初没有值，因此不占用垂直空间。当唱片集标题的值被渲染时，表格被向下推，正是这种“向下推”导致了闪烁。然而，我的理论可能是错误的

ng时钟属性不能缓解这种情况。我尝试了一个详细的选项，在容器

DIV

中包围

H3

标记，并在css中设置该

DIV

的高度和最小高度，但这也不能防止闪烁

正如我所说，如果我删除

H3

标记，就不会出现闪烁。有什么建议吗

---

如下面链接中所述，您只需将h2/h3标记包装在一个带有display:inline block的div中；像这样：

然后将其添加到css中：

.header2{最小宽度：100px；宽度：自动；最小高度：45px；背景色：#333；颜色：#FFF；显示：内联块；填充：10px；}

下面是两个具有上述属性的h2标记的JSFIDLE：

检查：

---

我还建议您对所有DOM使用ng bind，并移除ng斗篷

为什么不使用ng bind而不是字符串插值？我在中使用ng bind