AngularJS：如何缓存渲染指令？

Question

我有一个指令（），它在表格中呈现大量（> 10000）的项目。它在一个控制器的视图中使用。

通常，当我第一次访问此控制器时，渲染指令需要很长时间。

当我离开此控制器并再次访问它时，它会再次重新渲染。有没有办法缓存渲染的指令，以便它可以在第二次访问时立即显示？

Answer 1

只是一个想法，获取生成的html并将其存储在服务或本地/会话存储中，然后您可以使用时间戳或数据版本检查其有效性，并将现有的html重新加载到容器元素中，将修复依赖项问题，并帮助您构建一个更独立的指令，因为您不必依赖于dom位置，这样，如果您使用属性来配置指令，则多个指令实例可以呈现相同的数据集。

或者您可以使用带有$ timeout调用的递归函数以异步方式呈现DOM，如

function Draw(data,index){
    if(idx==data.length)
        return;
    //draw element idx
    $timeout(function(){
        Draw(data,index+1);
    })
}

这样，指令将花费更长时间，但结果会在屏幕上显得更快，并且您不会冒阻挡浏览器的风险

Answer 2

性能是否达到了指令中实际的DOM渲染或某些数据处理？如果DOM操作是问题，您可以尝试在离开控制器而不是卸载它时使用ng-show / ng-hide隐藏内容。执行此操作的一种好方法（如果您使用ui-router）将指令放在父视图中，并根据哪个子视图处于活动状态隐藏或显示内容。

如果数据处理出现问题，您可以将逻辑移至服务中。当您更改视图时，服务不会被卸载，因此它可以处理数据一次，并在加载时将其提供给控制器，无需额外处理。