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-include位于ng-repeat之外，因此不会加载每个标签的页面内容（即使未显示）。

AngularStrap选项卡加载html片段

1 个答案: