AngularJS bootstrap-ui标签拉入本地html内容

Question

I have set up a simple application and I want to pull in, for now, a local html file as the content of each tab. I also only want the 'apple' content to be displayed under the 'Apple' tab and the same for pear keeping my html as simple as possible as in the future more fruits could be added.

Please see the plunker for my current configuration: 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>

My question is, can you help me identify how to only pull in the specific content for each tab that is part of one html file?

Answer 1

This is a perfect use case for ng-include . As per the Documentation , it fetches, compiles and includes an external HTML fragment.

Use it like this:

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>

And that's it. Just make sure that file.html and file2.html exist, and you can just drag your markup right into each corresponding one.

Answer 2

Edit: Following on from your comment to Pangolin's answer: 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 (trimmed version)

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