1

アコーディオン プランカー ( http://plnkr.co/edit/plqTygiscmc2j9rB9bW0?p=preview )にこのレスポンシブ タブを作成しました。現在、AngularJS を使用しています。

応答性は正常に発生します ( http://webtrendset.com/demo/easy-responsive-tabs/Index.htmlのように) が、タブ機能が機能していません。

(ディレクティブを使用して) angular と統合しようとする前は、うまく機能していましたが、アイデアは angularjs を使用することです。

私が何を見逃したのだろうか？ありがとうございました。

4

1 に答える 1

2

ディレクティブには、アーキテクチャ上の問題だけでなく、技術的な問題もあります。簡単な部分から始めましょう。

  • 使用してTabs={...}いますが、ディレクティブは呼び出されTabsDirectiveます。さらに、ディレクティブにはキャメルケースの名前が必要です。したがって、ディレクティブの名前を or のいずれかに変更する必要がありますtabs(tabsDirectiveただし、ディレクティブの名前に「directive」を使用するのは少し冗長に思えます)。
  • <p>div内でタグを使用していますresp-tabs-containerが、Easy Responsive Tabs のドキュメントによると、<div>代わりにタグを使用する必要があります。

では大問題に。ディレクティブが実行されるとき、divそれが適用される のコンテンツはまだ Angular によって処理されていないため、link関数が実行されて が呼び出される$(element).easyResponsiveTabs(...)と、要素のマークアップは完全にはレンダリングされず、プラグインは単に機能しません。また、ディレクティブはコンテンツをラップする div に適用されるため、そのコンテンツのレンダリングの前に常に実行されます。

それを機能させるために使用できるハックがあります。easyResponsiveTabs呼び出しを少し遅らせて、Angular が div コンテンツを完全にレンダリングするようにします。$timeoutそのためにサービスを利用できます。ただし、これは完全ではありません。遅延が十分でない場合は機能せず、EasyReponsiveTags プラグインによって変換される前に元のマークアップが表示される場合があります (遅延が長くなるほど、元のマークアップが長く表示されます)。プランカーのこのフォークはそれを示しています。

これを処理する正しい方法は、タブがレンダリングされる方法とタイミングを制御するディレクティブを作成することだと思います。やる気がある場合は、Angular のホームページの「コンポーネントの作成」セクションの例から始めてください。

于 2013-08-25T04:54:38.117 に答える