angularjs – 在Angular中为ng-include延迟加载数据的首选方法是

发布时间：2020-12-17 07:13:33 所属栏目：安全来源：网络整理

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

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

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

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

当然我可以找到/ Customer / View / 12,但是即使没有请求,也会加载所有数据.

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

解决方法

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

Here is a sample fiddle,如果您使用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>

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

> url最初未设置为任何内容,因此ng-include无法获取
>单击父项时,使用ng-click将url变量设置为某个值(您可以使用范围函数来更好地控制URL,如this example所示)
>现在设置了该范围内的变量,因此ng-include可以获取点击时请求的URL

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!