AngularStrap选项卡加载html片段

Question

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

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

Answer 1

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

使用AngularStrap选项卡的示例,您可以使用url切换静态内容以检索html片段.以下是基于AngularStrap Tab示例的示例,其中包含以下主要更改:

1)$scope.tabs现在有一个page属性而不是指向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-include外面的,ng-repeat所以每个标签的页面内容都不会被加载(即使没有显示).