0

AngularJS の tabbale ディレクティブでタブが表示されない理由。

http://plnkr.co/edit/yu0Bh0?p=preview

これは angularJS のオプション部分であり、ドキュメントのどこでも使用されています ( here )

ディレクティブのソースはこちらです。

ドキュメント サイトに特別な CSS はありません。

編集：

plunkr のマークアップ (上記) は、上記のドキュメント リンクからコピーされました。しかし、Angular のメイン ページ (angularjs.org) のマークアップを試してみると、うまくいきます。ドキュメントサイトでどのように機能するかわかりません。作業中のマークアップにはdata-toggle、属性と、タブ ペインへの URL フラグメントがあります。

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class=""><a href="#project-html" data-toggle="tab">index.html</a></li>
        <li class=""><a href="http://angularjs.org/#project-js" data-toggle="tab">project.js</a></li>
        <li class=""><a href="http://angularjs.org/#list-html" data-toggle="tab">list.html</a></li>
        <li class="active"><a href="http://angularjs.org/#detail-html" data-toggle="tab">detail.html</a></li>
        <li class=""><a href="http://angularjs.org/#mongolab-js" data-toggle="tab">mongolab.js</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="project-html">
            <h1>project</h1>
        </div>
        <div class="tab-pane" id="project-js">
            <h1>project js</h1>

        </div>
        <div class="tab-pane" id="list-html">
            <h1>project html</h1>

        </div>
        <div class="tab-pane active" id="detail-html">
        </div>
        <div class="tab-pane" id="mongolab-js">
        </div>
    </div>
</div>
4

1 に答える 1

1

タブを機能させるには、何らかの機能/コードがどこかに書かれている必要があります。現在、そこにあるのは html と css (構造とスタイリングを提供する) だけで、動作部分 (JS 部分) はありません。

angular では、この動作はカスタムで記述され、ディレクティブが提供されます。ブートストラップでは、js ファイル ( bootstrap.js ? ) を含める必要があります。次に、これを機能させるには2つの方法があります。ドキュメントで指定されている data-* 要素を適切な場所に含めるか、ドキュメントの準備が整ったときに次のように呼び出します

$(".tabbable").tabs();

JSコードのどこかに。これは、プランカーに欠けている行動要素です。

于 2012-10-07T08:58:13.583 に答える