angularjs - 如何判断在 Angular-UI 中选择了哪个 Bootstrap 选项卡

Question

有没有办法知道使用 Angular UI 中的 Bootstrap 选项卡时选择了哪个选项卡？

我尝试查看 Pane 数组，但切换选项卡时它似乎没有更新。可以指定选项卡被选中时的回调函数吗？

更新代码示例。

该代码非常遵循 Angular UI Bootstrap 页面中的示例。

标记:

<div ng-controller="TabsDemoCtrl">
    <tabs>
        <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
            <div ng-include="pane.template"></div>
        </pane>
    </tabs>
</div>

Controller :

var TabsCtrl = function ($scope) {
  $scope.panes = [
    { title:"Events list", template:"/path/to/template/events" },
    { title:"Calendar", template:"/path/to/template/calendar" }
  ];
};

Answer 1

实际上这非常简单，因为每个pane都公开支持2路数据绑定(bind)的active属性:

<tabs>
    <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">      
        {{pane.content}}
    </pane>
</tabs>

然后可以轻松找到事件选项卡，例如:

$scope.active = function() {
    return $scope.panes.filter(function(pane){
      return pane.active;
    })[0];
};

这是一个工作 plunk