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

Question

我已经设置了一个简单的应用程序，现在我想引入一个本地 html 文件作为每个选项卡的内容。我也只希望 'apple' 内容显示在 'Apple' 选项卡下，梨也一样，让我的 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，它 fetches, compiles and includes an external HTML fragment.

这样使用：

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

Answer 2

编辑：根据您对 Pangolin 回答的评论：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>

fruit.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>

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

AngularJS bootstrap-ui tabs pulling in local html content

html

javascript

angularjs

angular-ui-bootstrap