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>