在ngStrap 2.1.0+中的选项卡中使用模板吗？

Timothy 发表于 Dev

提摩太

在ngStrap的2.1.0版本中，它们重写了Tabs指令。他们在选项卡上的文档现在没有任何在选项卡中使用模板的示例。我在使用2.0.5的页面上使用了Tabs，但是由于其他原因，不得不进行升级。我想确保我在github上打开问题之前不会丢失任何内容。ngStrap的站点仍然将模板作为选项列出，即使他们删除了所有示例。

制作我的标签的代码是：

$scope.tabs = [
{
    title: "Tab 1",
    template: "tab1.html"
},
{
    title: "Tab 2",
    template: "tab2.html"
}];

我尝试了几种不同类型的显示选项卡。它们在下面，可以在此plnkr中进行测试：http ://plnkr.co/edit/zEQ8mP6IkvCVPlYqxR59?p=preview

尝试1：

<div bs-tabs>
    <div ng-repeat="tab in tabs" title="{{ tab.title }}"  template="{{tab.template}}" bs-pane></div>
</div>

尝试2：

<div bs-tabs>
    <div ng-repeat="tab in tabs" title="{{ tab.title }}"  template="tab.template" bs-pane></div>
</div>

尝试3：

<div bs-tabs>
    <div ng-repeat="tab in tabs" title="{{ tab.title }}"  ng-bind="tab.template" bs-pane></div>
</div>

尝试4：

<div bs-tabs>
    <div ng-repeat="tab in tabs" title="{{ tab.title }}"  template="tab.template" bs-pane></div>
</div>

任何帮助表示赞赏！谢谢！

提摩太

我最终创建了一个解决方法。我正在发布，因此希望可以帮助其他人。

我最终创建了一个名为myTabs的新指令，因此在index.html中，我只是将

<my-tabs tabs="tabs"></my-tabs>

还有一个“ static-include”指令，基本上是ng-include，但不会创建新作用域。

希望这可以帮助某人！

这是plnkr：http ://plnkr.co/edit/MVbAN0uif9REjPjUusnr?p=preview

app.js具有：

$scope.tabs = [
{
  title: "Tab 1",
  show: true, //this is so this tab shows by default
  templateUrl: "tab1.html"
},
{
  title: "Tab 2",
  templateUrl: "tab2.html"
}];

myTabs.html-这是选项卡的模板。

<ul class="myTabs">
    <li ng-repeat="tab in tabs" ng-class="{active: tab.show}" ng-click="setActiveTab(tab.title)">{{tab.title}}</li> 
</ul> <br/><br/>
<div ng-repeat="tab in tabs" ng-show="tab.show"> 
    <div static-include="{{tab.templateUrl}}"></div>
</div>

myTabs.js

(function (ng) {
    ng.module('plunker')
        .directive('myTabs', [function() {
                return {
                    restrict: 'AE',
                    scope: false,
                    templateUrl: 'myTabs.html',
                    link: function(scope, element, attrs) {
                        scope.tabs = scope.$eval(attrs.tabs);

                        scope.setActiveTab = function(title) {
                            for (var i = 0; i < scope.tabs.length; i++) {
                                scope.tabs[i].show = false; // hide all the other tabs 

                                if (scope.tabs[i].title === title) {
                                    scope.tabs[i].show = true; // show the new tab 
                                }
                            }
                        }
                    }
                };
            }
        ])

    .directive('staticInclude', function ($http, $templateCache, $compile) {
        return function (scope, element, attrs) {
            var templatePath = attrs.staticInclude;
            $http.get(templatePath, { cache: $templateCache }).success(function (response) {
                var contents = element.html(response).contents();
                $compile(contents)(scope);
            });
        };
    });
}(angular));

style.css

.myTabs {
  list-style: none;
  position: relative;
  text-align: left;
  float: left;
  border-bottom: 1px solid lightgrey;
  width: 100%;
  padding-left: 0; }
  .myTabs li {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 15px 8px 15px 50px;
    font-weight: 0;
    float: left;
    display: block;
    padding: 10px;
    background-color: white;
    border-bottom: 1px solid lightgrey;
    margin: 0;
    margin-bottom: -1px; }
    .myTabs li:hover {
      background-color: lightgrey;
      cursor: pointer; }
  .myTabs li.active {
    display: block;
    padding: 10px;
    background-color: white;
    border-bottom: 0px solid lightgrey;
    border-top: 1px solid lightgrey;
    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey; }
    .dsTabs li.active:hover {
      background-color: white;
      cursor: pointer; }