0

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

<tabset>
    <tab heading="Tab1" active="activeTab1">
        ...
    </tab>
    <tab heading="Tab2" active="activeTab2" select="tabTab2()">
        ...
        <div id="newMap" class="col-sm-12" style="height: 400px;"></div>
        ...
    </tab>
    <tab heading="Tab3" active="activeTab3" select="tabTab3()">
        ...
    </tab>
</tabset>

コントローラーで:

$scope.tabTab2 = function()
{
   console.log("tab2");
   var map = new google.maps.Map(document.getElementById("newMap"), mapOptions);
}

$scope.tabTab3 = function()
{
   console.log("tab3");
}

したがって、このコードに関連する 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。プランカーを

$scope.tabTab2 = function()
{
  console.log("Tab2");
  console.log(document.getElementById("newMap"));
}

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

Tab2
null
Tab2
<div id="newMap" class="col-sm-12" style="height: 400px;"></div>

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

4

0 に答える 0