angularjs引导标签使用

Question

我想在这个例子中使用angularjs bootstrap实现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

这个插件显示了你正在寻找的一个例子。 在angularjs JsFiddle-Examples wiki上找到原始链接。

Angular Bootstrap可以使用ng-view和url作为当前选项卡深度链接（Andy Joslin）

另外，根据您的使用情况，您可能需要查看angularjs主页http://angularjs.org上的Create Components部分。 该部分中的'component.js'源代码显示了示例代码，可快速获取标签而无需angularjs引导程序 。 如果需要对功能进行更多控制，可以使用此示例构建自定义解决方案。