angularjs - ui-bootstrap 中的 Angular 延迟加载

标签 angularjs angular-ui-bootstrap

我正在将 Angular 与 Twitter Bootstrap 导航选项卡结合使用,并希望能够根据事件选项卡启用/执行操作。

This fiddle shows my basic structure: 

fiddle

我想要做的是在“详细信息”选项卡上,仅在激活该选项卡时加载或处理内容。

目前,加载“详细信息”选项卡的内容时会出现延迟/处理开销,因为它是处理器密集型的。它相当小,但当所有选项卡行都在工作副本中呈现时,会产生相当大的延迟。该示例仅显示 3 行,但普通页面大约有 10 行。 由于用户不太可能希望单击每一行上的“详细信息”选项卡,因此我希望在选择该选项卡时激活或加载内容。

关于如何实现这一点有什么想法吗?

最佳答案

您可以使用 ng-if 和 ng-include 标签的组合来延迟加载内容

<div ng-if="option=='details'" ng-include="/details">
</div>

关于angularjs - ui-bootstrap 中的 Angular 延迟加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27534635/

相关文章:

angularjs - 如果在 ng-include 中,则验证不起作用

javascript - Angular JS - {{ }} 不起作用,但 data-ng-bind 显示范围

angularjs ui-bootstrap Accordion 不能平滑过渡/滑动

angularjs - QuaggaJS 和 Angular

angularjs - 将 Angular 与 Grails 一起使用时出错

angularjs - 如何在不引发错误的情况下检查模块的存在?

AngularJS - 关闭模态功能不起作用

angularjs - angular ui bootstrap dropup 不起作用

css - 使用表单时如何解决 Bootstrap 和 Clarity 样式冲突

javascript - Angular Bootstrap UI、HTML5 日期选择器和 Angular 1.3.0