AngularStrap标签加载HTML片段 [英] AngularStrap tabs load html fragment

问题描述

我目前正在与Twitter的引导的AngularJS项目，并正在试图引导我的指令转移到角。我决定AngularStrap，因为它提供了引导 - 选择（我不知道是AngularUI相同）的支持。该标签例如只覆盖了静态的HTML虽然。有没有通过AngularStrap或AngularJS任何方式动态地加载HTML片段，这样就点击选项卡时，它只是叫什么名字？我的HTML片段需要执行JavaScript的为好。

I am currently working on an AngularJS project with Twitter Bootstrap, and am trying to shift my Bootstrap directives into Angular. I decided on AngularStrap as it provided support for Bootstrap-Select (which I wasn't sure was the same for AngularUI). The tabs example only covered static html though. Is there any way via AngularStrap or AngularJS to load html fragments dynamically, so that it is only called when the tab is clicked? My html fragments need to execute javascript as well.

我这样做的原因有两方面。首先是每个选项卡包含了相当多的内容，而我不希望一次加载所有的标签，这会减慢加载。第二个原因是，我preFER更加模块化的方法来我的源$ C ​​$ C，而不是把一切都在同一个HTML文件。

My reason for doing so is two-fold. First is that each tab contains quite a lot of content, and I do not wish to load all the tabs at once, which will slow down the loading. The second reason is that I prefer a more modular approach to my source code and not put everything on the same html file.

推荐答案

您可以使用 NG-包括：指令来加载HTML片段。

You can use the ng-include directive to load html fragments.

使用AngularStrap标签的例子就可以切换出的URL静态内容检索HTML片段。 这里是的基础上，AngularStrap例如标签与这些重要变化的例子：

Using the AngularStrap Tab's example you can switch out the static content with the url to retrieve the html fragment. Here is an example based on the AngularStrap Tab example with these key changes:

1） $ scope.tabs 现在有一个页属性而不是指向任何template1.html内容， template2.html，或template3.html。

1) $scope.tabs now has a page property instead of content pointing to either template1.html, template2.html, or template3.html.

    $scope.tabs = [
    {title:'Home', page: 'template1.html'},
    {title:'Profile', page: 'template2.html'},
    {title:'About', page: 'template3.html'}
  ];

2） NG-包括添加到显示当前选择的选项卡的页面。

2) An ng-include is added to display the currently selected tab's page.

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

请注意：我有 NG-包括之外 NG-重复所以每个标签的页面内容赢得了 T为加载（即使不显示）。

Note: I have the ng-include outside of the ng-repeat so each tab's page contents won't be loaded (even if not displayed).

这篇关于AngularStrap标签加载HTML片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！