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>

AngularJS指令渲染是跳跃的

1 个答案: