Question

在ngStrap的2.1.0版中，他们重写了Tabs指令。他们在选项卡上的文档现在没有使用选项卡中的模板的任何示例。我使用2.0.5在我的页面上使用Tabs但由于其他不起作用而不得不升级。我想确保在我在github上打开问题之前我没有遗漏某些内容。ngStrap's site仍然会将模板列为选项，即使他们删除了所有示例。

制作我的标签的代码是：

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

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

Answer 1

我最终创建了一个解决方法。我发帖，所以我希望能帮助其他人。

我最终创建了一个名为myTabs的新指令，所以在index.html中我只是把

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

还有一个＆＃34;静态包含＆＃34;指令基本上是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; }

Answer 2

正确的解决方案是：

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

再见

Answer 3

我解决了同样的问题：

<div bs-active-pane="tabs.activeTab" bs-tabs>
  <div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-include src="tab.template" bs-pane>
  </div>
</div>

Answer 4

你可能想试试这个...... 删除src，而是将模板URL设置为ng-include，如下面的代码......

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

4 个答案: