7

我想在这个例子中实现引导选项卡，使用angularjs bootstrap - 它包含指令 tabbable 和 tabPane。它不起作用，我不知道如何让球滚动。

<tabbable>
    <tabPane title="first">
        <div ng-controller="FirstCtrl"></div>
    </tabPane>
    <tabPane title="tabbable">
        <div ng-controller="SecondCtrl"></div>
    </tabPane>
</tabbable>

应用程序.js：

angular.module('orders_manage', ['orders_manage.services', 'bootstrap'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

$routeProvider
    .when('/first', { templateUrl:'/partials/first.html', controller:FirstCtrl})
    .when('/second', { templateUrl:'/partials/second.html', controller:SecondCtrl})
4

2 回答 2

4

如果您查看源代码，您会发现这些指令仅限于类名：https ://github.com/angular/angular.js/blob/v1.0.x/src/bootstrap/bootstrap.js #L54

重写您的示例以使用<div class="tabbable">并将<div class="tab-pane">解决该问题。

于 2012-12-06T00:55:36.047 回答
1

这个plunk显示了您正在寻找的示例。在angularjs JsFiddle-Examples wiki上找到的原始链接。

使用 ng-view 和 url 作为当前选项卡深度链接的 Angular Bootstrap Tabbable (Andy Joslin)

此外，根据您的用例，您可能需要查看angularjs 主页http://angularjs.org上的Create Components部分。该部分中的“component.js”源代码显示了无需angularjs bootstrap即可快速使选项卡工作的示例代码。如果您需要对功能进行更多控制，可以使用此示例构建自定义解决方案。

于 2012-12-30T19:06:14.500 回答