AngularStrap 选项卡加载 html 片段

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

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

您可以使用ng-包含 http://docs.angularjs.org/api/ng.directive:ngInclude加载 html 片段的指令。

使用 AngularStrap Tab 的示例，您可以使用 url 切换静态内容以检索 html 片段。这是一个例子 http://plnkr.co/edit/tpEJky6AyBGzbJz5QkmV?p=preview基于 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) An ng-include添加以显示当前所选选项卡的页面。

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

注意：我有ng-include之外的ng-repeat因此每个选项卡的页面内容都不会被加载（即使不显示）。