Question

我试图在手风琴标题上添加一个按钮。但是当我点击按钮时，手风琴组会崩溃或打开。但是当我点击按钮时，我不想触发手风琴点击。

如果我将button标签放在accordion-heading中，它会把它放到accordion-toggle类中。所以它不会触发按钮点击。不确定是否有一种简单的方法来改变它。

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

任何人都可以提供帮助？感谢

Answer 1

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

Answer 2

检查标记的解决方案对我没有用，直到我在$ 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>

但是，我需要两种方式。如果我删除了任何一个，任何点击该复选框都会打开或关闭手风琴

Answer 3

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

.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>

添加按钮到手风琴标题angular-ui bootstrap

3 个答案: