8

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

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

4

1 回答 1

10

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

使用 AngularStrap 选项卡的示例，您可以使用 url 切换静态内容以检索 html 片段。这是一个基于 AngularStrap 选项卡示例的示例，其中包含以下关键更改：

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所以不会加载每个选项卡的页面内容（即使不显示）。

于 2013-06-04T05:00:48.583 回答