javascript - 拉入本地 html 内容的 AngularJS bootstrap-ui 选项卡

Question

我已经设置了一个简单的应用程序，现在我想引入一个本地 html 文件作为每个选项卡的内容。我也只希望“苹果”内容显示在“苹果”选项卡下，梨也一样，让我的 html 尽可能简单，因为将来可以添加更多水果。

请查看我当前配置的 plunker: http://plnkr.co/edit/Y6Ey8vbvrq3xzvBhJS7o?p=preview

  <tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="getContent($index)" active="tab.active" disabled="tab.disabled">
  <div ng-hide="!tabs.isLoaded">
  <h1>{{tab.title}}</h1>
    <div ng-repeat="item in tabs.content">
      <p>{{item[tab.title]}}</p>
    </div>
  </div>
  <div ng-hide="tabs.isLoaded"><h3>Loading...</h3></div>
  </tab>

我的问题是，你能帮我确定如何只提取属于一个 html 文件的每个选项卡的特定内容吗？

Answer 1

这是 ng-include 的完美用例。根据 Documentation ，它获取、编译并包含一个外部 HTML 片段。

像这样使用它:

Javascript

$scope.templates = [
  { URL: '/path/to/file.html' },
  { URL: '/path/to/file2.html'}
]

HTML

<div ng-repeat="template in templates">
  <div ng-include="template.URL">
    <!-- Template markup goes here -->
  </div>
</div>

就是这样。只需确保 file.html 和 file2.html 存在，您就可以将您的标记直接拖到每个相应的标记中。