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

AngularJS bootstrap-ui tabs pulling in local html content

本文关键字：html 内容 bootstrap-ui 选项 AngularJS      更新时间：2023-09-26

我已经设置了一个简单的应用程序，现在我想拉入一个本地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文件中的每个选项卡拉入特定内容？

这是

ng-include的完美用例。根据文档，它fetches, compiles and includes an external HTML fragment.

像这样使用它：

爪哇语

$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 存在，您就可以将标记直接拖到每个相应的标记中。

编辑：从你的评论到穿山甲的回答：Plunker

.JS

app.directive("fruit", function() {
    return {
        restrict: "E",
        templateUrl: "fruit.html"
    };
});

.HTML

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

水果.html（修剪版）

<div ng-show="tab.title=='Apple'">
<h2>Apple</h2>
<p>The apple tree....
</div>
<div ng-show="tab.title=='Pear'">
<h3>Pear</h3>
<p>The pear is 
</div>
相关文章：