AngularJS指令呈現跳動

Question

我正在使用AngularJS創建我的網站。

我已經在整個身體上應用了ng-cloak指令。

但是，在加載時，元素似乎是異步加載的（例如，在加載指令模板時），從而導致元素四處移動，直到加載整個頁面為止。

如何避免元素短暫閃爍？ 我已經應用了ng-cloak。 有一個更好的方法嗎？

似乎部分問題是CSS樣式沒有立即應用。 例如，如果我設置了加載速度較慢的東西的寬度，那么在將該樣式應用於元素之前，有時會花費一毫秒。

Answer 1

您應該將模板連接到index.html文件中。 異步加載它們只會造成不必要的延遲，降低網站速度並破壞用戶體驗。

但是，這並不意味着您應該在索引文件中編寫所有模板，這將是噩夢。 在部署之前，請使用任務處理器（例如grunt或gulp）將所有單獨的模板合並到index.html 。

模板需要在ng-app元素內的script標簽內，如下所示：

<div ng-app="myApp">
    <div my-directive></div>

    <script type="text/ng-template" id="/my-directive.html">
        Content of the template.
    </script>
</div>