Question

我现在有一个bootstrap手风琴。我想避免在您单击文本字段或带有文本＆＃34;任何＆＃34;的按钮时，手风琴会扩展。

<uib-accordion>
  <div uib-accordion-group class="panel-default" is-open="status.open">
    <uib-accordion-heading>
      I can have markup, too!<input type='text'><button>
      anything</button>
     <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
    </uib-accordion-heading>
    This is just some content to illustrate fancy headings.
  </div>
</uib-accordion>

Answer 1

此处的关键是实施$event.stopPropagation()和$event.preventDefault()。在下面的插件中，我将任何我们不想触发手风琴打开动作的内容放在ng-click="ignoreClick()"的范围内，该范围使用上面的$ event方法来防止bootstrap打开手风琴。

这样只有右侧的插入符号图标才能打开手风琴。

https://embed.plnkr.co/xgjw72lg4za0SDdUixVg/

Answer 2

ngClick指令（以及所有其他事件指令）创建$ event变量，该变量在同一范围内可用。此变量是对JS事件对象的引用，可用于调用preventDefault（）和stopPropagation（）。

因此，您可以在输入和按钮上设置点击事件，如下所示

$scope.cancelOpening= function(event){
    event.preventDefault();
    event.stopPropagation();
}

然后在控制器中设置函数cancelOpening

function findmatching(obj,word){
    for(var key in obj){
      if(obj[key]['name'].indexOf(word)!=-1){
        return obj[key]
    }
   }
  }
 var mymatchingvalue=findmatching(userinput,word)

工作fiddle

Answer 3

您可以在is-disabled="true"中添加uib-accordion-group，以避免扩展：

<div uib-accordion-group class="panel-default" is-open="status.open" is-disabled="true">

然后使用指令 NgClick 更改status.open的值：

<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}" ng-click='status.open = !status.open'></i>

因此，您可以通过单击右侧的V形图标来控制崩溃。

你已经在link

中得到了它

单击时防止引导程序扩展。 Bootstrap Angular.js

3 个答案: