javascript - Angular + bootstrap-ui，检查当前选项卡是否已经激活

Question

我正在将一个函数挂接到选项卡上，单击以从服务器调用一些数据。当我单击该特定选项卡时，我会触发它，但是我希望它摆脱已经在该选项卡上并单击它的人的实例 - 并再次触发对服务器的调用(不需要)。我正在使用 angular + angular-bootstrap-ui。

所以我尝试在选项卡本身上 Hook 函数以检查是否已经处于事件状态，但是似乎一旦 ng-click 被触发，它就已经被设置为事件状态。所以无论我什么时候点击它，它都会恢复事件状态。我需要某种方法来检查我是否已经在该选项卡上。这是我试过的

   <tabset>
{{tabs.active}}
    <tab heading="Tree" >

    </tab>
    <tab heading="XML" active="tabs.active" ng-click="checkTab(tabs.active)">


    </tab>
</tabset>

然后在 Controller 中

  $scope.checkTab = function(check){
        console.log(check);

       }

因此，无论如何，这将始终返回 true，因为似乎在点击触发之前 .active 已设置为 true。有没有办法解决？谢谢!

更新:fiddle - https://jsfiddle.net/7ognp2nj/2/

Answer 1

我建议使用 select 而不是 ng-click。像这样:

    <tab heading="Tree" select="checkTab('tab 1 selected')">
       tab1
    </tab>
    <tab heading="XML" select="checkTab('tab 2 selected')">
       tab2
    </tab>

当您单击事件选项卡时，不会调用 CheckTab。它在您单击非事件选项卡时运行。第一次显示tab时不点击会执行一次。但它看起来像期望的行为。