angularjs - AngularStrap 选项卡加载 html 片段

Question

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

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

Answer 1

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

使用 AngularStrap 选项卡的示例，您可以使用 url 切换静态内容以检索 html 片段。 Here is an example基于 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-repeat 之外有 ng-include，因此每个选项卡的页面内容不会被加载(即使不显示)。