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");
}

所以，我有两个与此代码相关的问题。

第一：如果activeTab2设置为true，该函数tabTab2将运行两次（Tab3 相同）。这是为什么？如果我然后选择 tab1 并返回到 tab2 它将只运行一次......

第二：我试图在 div 中使用 google.mapsnewMap但它抛出错误Cannot read property 'offsetWidth' of null并且null元素是document.getElementById("newMap"). 再说一遍，这是为什么呢？

如果我设置activeTab2为true，false然后activeTab1单击 tab2，它工作正常。问题仅在于它在开始时处于活动状态...

- - - - - 编辑 - - - - - - -

这是笨蛋

如果将 activeTab1 设置为 TRUE，则它可以工作，如果设置为 FALSE（并且 activeTab2 设置为 TRUE），则它不起作用。

在回复莫里西时，名称 tabTab1... 仅适用于 Stackoverflow 问题...

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

plunker url 更新了

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

所以，刚刚意识到问题在于选项卡在select. 如果您将 plunker 更改为

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

并且activeTab为 TRUE，控制台将显示

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

因此，该函数第一次运行该元素不存在，但第二次它确实存在......

4

0 回答 0