Question

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

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

app.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})

Answer 1

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

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

Answer 2

此plunk显示了您要查找的内容的示例。在angularjs JsFiddle-Examples wiki上找到原始链接。

Angular Bootstrap可以使用ng-view和url作为当前标签深度连接（安迪乔斯林）

此外，根据您的使用情况，您可能需要查看angularjs主页http://angularjs.org上的创建组件部分。该部分中的'component.js'源代码显示了在没有angularjs bootstrap的情况下快速获取标签的示例代码。如果需要对功能进行更多控制，可以使用此示例构建自定义解决方案。

angularjs引导标签使用

2 个答案: