angular-ui 选项卡标题中的复选框答案

【问题标题】：checkbox in angular-ui tab's headerangular-ui 选项卡标题中的复选框
【发布时间】：2013-07-30 22:49:55
【问题描述】：

我正在使用 AngularUI 的引导库 0.4.0。我想制作一个带有可检查标题的标签集Plunker demo。但是，如您所见，我根本无法选中该复选框。任何建议将不胜感激。

【问题讨论】：

标签： angularjs checkbox tabs angular-ui-bootstrap

【解决方案1】：

我想我已经找到了一个解决方案，虽然它可能看起来有点老套。

在复选框中，我添加了一个额外的 ng-click 属性成为

<input type="checkbox" ng-click="stopPropagation($event)"/>

根据AngularJS文档，$event有action的事件对象，这里是click。因此，如果我们可以停止事件的传播，我们可以选中复选框。在控制器中，我添加了一个 stopPropagation 方法，如下所示

$scope.stopPropagation = function(e) {
    // to make sure it is a checkbox
    if (angular.element(e.currentTarget).prop('tagName') === 'INPUT') {
        e.stopPropagation();
    }
}

这是 Plunker Demo

【讨论】：

值得一提的是，这种方法也适用于手风琴 - 你在手风琴标题中有一个复选框。