angularjs - Angular 中的 ng-include 延迟加载数据的首选方法是什么？

Question

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

我为详细信息 View 创建了一个部分，所以我的代码如下所示:

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

当然我可以定位到 /Customer/View/12 ，但随后所有数据都会加载，即使没有请求也是如此。

那么，实现这一目标的方法是什么？有人可以指出我正确的方向吗？

Answer 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没什么可取的

单击父项时设置 url变量使用 ng-click (您可以使用范围函数来更好地控制 url，如 this example )

该范围内的变量现在设置为 ng-include可以在点击请求时获取 url

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