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

Question

我在循环使用对象列表时创建(父)行ng-repeat.我还创建了一个隐藏的行.可见行包含soms基本数据,隐藏行(detail)包含所有数据.我希望在单击父行时可以看到详细信息行.而且我只想在细节行变得可见时加载数据.此外,一旦已加载行的详细信息,我不想再次访问服务器.

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

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

当然我可以找到/Customer/View/12,但随后所有数据都被加载,即使没有请求也是如此.

那么,实现这个目标的方法是什么？有人能指出我正确的方向吗？

Answer 1

实现此目的的一种方法是在ngInclude中使用变量,并在单击父行时设置它.

这是一个示例小提琴,如果您使用Chrome(或其他浏览器)的网络标签,您可以看到在您点击某个项目之前不会请求包含中的网址.

<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>

从高层次来看,这里发生的是:

1. url最初没有设置任何东西,所以ng-include没有东西可以取
2. 单击父项时将url变量设置为某些内容ng-click(您可以使用范围函数来更好地控制URL,如本例所示)
3. 现在设置了该范围内的变量,因此ng-include可以获取点击时请求的URL

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