将按钮添加到手风琴标题 angular-ui 引导程序答案

【问题标题】：Add button to accordion heading angular-ui bootstrap将按钮添加到手风琴标题 angular-ui 引导程序
【发布时间】：2014-06-22 05:52:45
【问题描述】：

我正在尝试在手风琴标题上添加一个按钮。但是当我点击按钮时，手风琴组折叠或打开。但我不想在点击按钮时触发手风琴点击。

如果我将按钮标签放在手风琴标题中，它会将其放入手风琴切换类中。所以它不会触发按钮点击。不确定是否有简单的方法来更改它。

http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview

有人可以帮忙吗？谢谢

【问题讨论】：

标签： button click accordion angular-ui-bootstrap

【解决方案1】：

添加 $event.stopPropagation();在 ng-click 中。 http://plnkr.co/edit/eXE7JjQTMxn4dOpD7uKc?p=preview

【讨论】：

【解决方案2】：

或者你可以在你的按钮标签中创建一个指令以供进一步使用：

.directive('yourDirective',function(){
    return{
        restrict:'A',       
        link : function(scope,ele,attr){
            ele.bind("click",function(event){

             alert('I will not toggle accordion');
             event.preventDefault();
             event.stopPropagation();

            })
        }
    }

})

HTML

<button your-directive> Click Me <button>

【讨论】：

【解决方案3】：

勾选标记的解决方案对我不起作用，直到我在 $event.stopPropagation() 之前添加了 $event.preventDefault()。也许我得到了不同的结果，因为我正在处理一个复选框或更新版本的 Angular？

        <uib-accordion-heading>
          {{ thisGroup.stringThatShouldOpenAndCloseTheHeader }}

          <!-- my checkbox changes -->
          <div class="material-switch pull-right">
            <input type="checkbox" id="{{ thisGroup._id }}" name="{{ thisGroup._id }}" ng-checked="thisGroup.active" />
            <label for="{{ thisGroup.template._id }}" ng-click="$event.preventDefault(); $event.stopPropagation(); $ctrl.checkOrUnCheck(arg)"></label>
          </div>

        </uib-accordion-heading>

不过，我两者都需要。如果我删除了任何一个，任何点击复选框都会打开或关闭手风琴

【讨论】：