angularjs – AngularStrap标签加载html片段

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

导读：我目前正在使用Twitter Bootstrap开发一个AngularJS项目,我正在尝试将我的Bootstrap指令转换为Angular.我决定使用AngularStrap,因为它为Bootstrap-Select提供了支持(我不确定AngularUI是否相同). tabs example只覆盖了静态html.有没有办法通过AngularStrap或

我目前正在使用Twitter Bootstrap开发一个AngularJS项目,我正在尝试将我的Bootstrap指令转换为Angular.我决定使用AngularStrap,因为它为Bootstrap-Select提供了支持(我不确定AngularUI是否相同). tabs example只覆盖了静态html.有没有办法通过AngularStrap或AngularJS动态加载html片段,以便只在单击选项卡时调用它？我的html片段也需要执行javascript.

我之所以这样做是双重的.首先,每个选项卡包含很多内容,我不希望一次加载所有选项卡,这将减慢加载速度.第二个原因是我更喜欢对我的源代码采用更模块化的方法,而不是将所有内容都放在同一个html文件中.

您可以使用 ng-include指令加载html片段.

使用AngularStrap选项卡的示例,您可以使用url切换静态内容以检索html片段. Here is an example基于AngularStrap Tab示例,包含以下关键更改：

1)$scope.tabs现在有一个页面属性,而不是指向template1.html,template2.html或template3.html的内容.

$scope.tabs = [
    {title:'Home',page: 'template1.html'},{title:'Profile',page: 'template2.html'},{title:'About',page: 'template3.html'}
  ];

2)添加ng-include以显示当前所选选项卡的页面.

<div ng-include src="tabs[tabs.activeTab].page"></div>

注意：我在ng-repeat之外有ng-include,因此不会加载每个标签的页面内容(即使没有显示).

（编辑：李大同）

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