問題タブ [angular-ui-tabset]

ルートに基づいて angular-ui タブを自動的にアクティブにするディレクティブを作成しようとしています。my ディレクティブは、タブセット内のすべてのタブ要素に追加されることを意図しています。

要求しています

私のコンパイル関数では、次のように始まるリンク関数を返しています。

これtabsetCtrlは、意図したタブセットのコントローラーです。

.selectのメソッドを呼び出したいtabsetCtrl

そのコードは次のようになります。

そして、リンク関数で取得しているスコープパラメーターを渡して呼び出しています。

tab と tabset のコードを見ると、tabsetselectedTabが tab ディレクティブのスコープであると想定していることがわかります。

tabsetCtrl.addTab(scope);これは、タブが呼び出しておりtabsetCtrl、スコープをそのタブ コレクションに追加するという事実からわかります。

タブコントロールが呼び出されますが、それに到達する方法がわかりません。私のディレクティブはタブ要素に適用されるため、これはタブコントロールのスコープと同じスコープであると想定していました。

私の Q は、タブ属性に追加された自分のディレクティブから、タブによって tabsetCtrl に送信されるスコープの同じインスタンスにどのように取得するのですか?

ノート：

selectedTab.onSelect();1）これは、ディレクティブのlinkingFunctionで取得したスコープとまったく同じであると以前は考えていましたが、その場合、「未定義は関数ではありません」という行でエラーが発生する理由がわかりません[つまり、私のディレクティブのスコープである selectedTab には「onSelect」がありません。正しく理解すれば、タブのスコープは、次のように分離されたスコープの減速に基づいて持つ必要があります。

2）これは、タブディレクティブも定義されているという事実にも関連している可能性がありますが、transclude:true正確にはわかりません。

アプリケーションはすべて問題なく、最新のブラウザーで動作します。ただし、Internet Explorer 8 で動作させる必要があり、タブのng-repeatが動作していないようです。タブ間を移動できません。ホバーとアクティブなタブは機能していますが、コンテンツは変更されません。

私のコードを見てください。

HTML

これらは、私が最新のブラウザーを使用している場合の要素であり、問​​題なく動作しています.. (ChromeDevTools から)。

これは私の IE8 開発者ツールのものです。

タブセット ビューは問題ありません。これに従いました。AngularUI - 互換性のあるブラウザ

アップデート。

私は自分の機能に問題がないので、含めませんでした。

angular-bootstrap 要素でスクロール可能なタブを実装するための bootstrap-scrolling-tabs 。

ここに私のコードがあります

これを実行すると、以下のエラーが発生します。これの何が問題なのですか？

私は3つのタブを持つタブセットを持っています:

コントローラーで:

したがって、このコードに関連する 2 つの質問があります。

最初:activeTab2が に設定されてtrueいる場合、関数tabTab2は 2 回実行されます (Tab3 に関しても同じです)。何故ですか？次にタブ1を選択してタブ2に戻ると、一度だけ実行されます...

2番目：div内でgoogle.mapsを使用しようとしていますがnewMap、エラーがスローCannot read property 'offsetWidth' of nullされ、null要素はdocument.getElementById("newMap"). もう一度、それはなぜですか？

trueに設定activeTab2しfalseてactiveTab1から tab2 をクリックすると、正常に動作します。問題は、最初にアクティブになったときだけです...

- - - - - 編集 - - - - - - -

これがプランカーです

activeTab1 を TRUE に設定すると機能し、FALSE に設定すると (そして activeTab2 を TRUE に設定すると) 機能しません。

maurycy への返信では、名前 tabTab1... は Stackoverflow の質問のみです...

----- EDIT2 -------

プランカーの URL が更新されました

----- EDIT3 -------

そのため、問題は、タブが の 2 倍の機能を実行しているという事実にあることに気付きましたselect。プランカーを

をactiveTabTRUEにすると、コンソールに次のように表示されます

そのため、関数が初めて実行されたときは要素が存在しませんが、2 回目は存在します...

私のコードは次のようになります:

このコードは、次の plunker コードで示されているように、デフォルトのタブセットを作成します。

http://plnkr.co/edit/?p=preview&s=gYWtjBltWXYqhczs

この図のように、タブの見出しが下部にあるようにタブセットを表示したいと思います。

これを達成する方法を教えてください。

タブセットを作成するために、次のように AngularUI Bootstrap を使用しています。

ページに出力されるコードは次のようになります。

私が抱えている問題は、見出しリンクが欠落しているため、キーボードから選択できないことですtabindex. 明らかに、angular はリストのフィラー HTML を作成しているため、それを追加することはできませんtabindex。見出し属性の横にあるタブ要素にa を追加すると、それが必要なタグではliなく、に追加されるだけです。a

tabindexタブセットを定義し、ナビゲーション (見出し) リンクに配置するような属性を渡す方法はありますか?

Chart.jsに基づくAngularJSモジュールを使用してグラフを表示しています。それは魅力のように機能しますが、AngularJS タブセットにチャートを表示すると、それが最初のタブでない場合、グラフはレンダリングされません。

これはJSFiddleです。誰かがこれを修正できますか?

ありがとう