单击时防止 bootstrap 展开。 Bootstrap Angular.js

Question

我目前有一个 bootstrap 手风琴。我想避免当您单击文本字段或带有文本 "anything" 的按钮时，手风琴展开。

<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()。在下面的 plunk 中，我将任何我们不想触发手风琴打开操作的东西放在带有 ng-click="ignoreClick()" 的范围内，它使用上面的 $event 方法来防止 bootstrap 打开手风琴。

这样只有右边的插入符图标会打开手风琴。

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

Answer 2

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

所以你可以在你的输入和按钮上设置一个点击事件，如下所示

<uib-accordion-heading>
     I can have markup, too!<input type='text' ng-click="cancelOpening($event);">
      <button ng-click="cancelOpening($event);">
      anything</button>
     <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>

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

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

工作fiddle

Answer 3

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

<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 展开。 Bootstrap Angular.js

Prevent the bootstrap from expanding when clicking. Bootstrap Angular.js

angularjs

angular-ui-bootstrap