Angular 中 ng-include 延迟加载数据的首选方式是什么？答案

【问题标题】：What is the preferred way of lazy loading data for an ng-include in Angular?Angular 中 ng-include 延迟加载数据的首选方式是什么？
【发布时间】：2013-06-02 12:15:56
【问题描述】：

我在使用ng-repeat 循环遍历对象列表时创建（父）行。我还创建了一个隐藏行。可见行包含一些基本数据，隐藏行（详细信息）包含所有数据。我希望在单击父行时可以看到详细信息行。而且我只想在详细信息行可见时加载数据。另外，一旦已经加载了一行的详细信息，我就不想再去服务器了。

我为详细视图创建了一个部分，所以我的代码如下所示：

<div ng-include="'/Customer/View'"></div>

当然，我可以定位到@987654323@，但随后所有数据都已加载，即使没有请求也是如此。

那么，实现这一点的方法是什么？有人能指出我正确的方向吗？

【问题讨论】：

标签： angularjs angular-ui angularjs-ng-repeat

【解决方案1】：

实现此目的的一种方法是将变量与 ngInclude 一起使用，并在单击父行时设置它。

Here is a sample fiddle，如果您使用 Chrome（或其他浏览器）的网络选项卡，您可以看到在您单击项目之前不会请求包含中的 url。

<div ng-repeat="item in items" ng-click="url = item">
    <span ng-hide="url">Click to load</span>
    <span ng-show="url">Loaded item {{url}}</span>
    <div ng-include="url"></div>
</div>

概括地说，这里发生的事情是：

url 最初没有设置为任何内容，因此 ng-include 没有可获取的内容
单击父项时，使用ng-click 将url 变量设置为某个值（您可以使用范围函数来更好地控制URL，例如this example）
该范围内的变量现在已设置，因此ng-include 可以在单击时获取请求的 url

注意：您不必在 javascript 中声明 url 变量，因为 ngRepeat 为您正在循环的每个项目创建一个新范围，因此设置变量的点击操作只会影响您正在工作的当前范围与。

【讨论】：