Angular + bootstrap-ui, 检查当前标签页是否已经激活

Question

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

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

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

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


    </tab>
</tabset>

然后在控制器中

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

       }

因此，无论如何，这将始终 return 为真，因为看起来 .active 在点击触发之前已设置为真。有没有办法解决？谢谢！

更新：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时不点击会执行一次。但它看起来像期望的行为。

Angular + bootstrap-ui, 检查当前标签页是否已经激活

Angular + bootstrap-ui, check if current tab is already active

javascript

angularjs

angular-ui-bootstrap