7

angularjs ブートストラップを使用して、この例のようにブートストラップ タブを実現したい- ディレクティブ 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})
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 ブートストラップなしでタブをすばやく動作させるためのサンプル コードを示しています。機能をさらに制御する必要がある場合は、この例を使用してカスタム ソリューションを構築できます。

于 2012-12-30T19:06:14.500 に答える