Question

我已经设置了一个简单的应用程序，我想暂时将本地html文件作为每个选项卡的内容。我也只想要＆＃39; apple＆＃39;要在Apple＆＃39; Apple＆＃39;下显示的内容选项卡和梨一样保持我的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的完美用例。根据{{3}}，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内容

2 个答案: