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

问题

I currently have a bootstrap accordion. I want to avoid that when you click on the text field, or the button with the text "anything", the accordion expands.

https://jsfiddle.net/tev2b9je/

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

回答1:

The key here is implement $event.stopPropagation() and $event.preventDefault(). In the following plunk I put anything that we don't want to trigger the accordion open action inside a span with ng-click="ignoreClick()" which uses the $event methods above to prevent bootstrap from opening the accordion.

This way only the caret icon on the right will open the accordion.

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

回答2:

ngClick directive (as well as all other event directives) creates $event variable which is available on same scope. This variable is a reference to JS event object and can be used to call preventDefault() and stopPropagation().

So you can set a click event on your input and button to do this as bellow

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

and then set the function cancelOpening in your controller

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

working fiddle

回答3:

You can add is-disabled="true" in uib-accordion-group in order to avoid the expanding:

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

And then use the directive NgClick to change the value of 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>

So you can control the collapse by clicking on the chevron icon on the right.

You've got it in this link

来源：https://stackoverflow.com/questions/44074758/prevent-the-bootstrap-from-expanding-when-clicking-bootstrap-angular-js

标签

angularjs

angular-ui-bootstrap