Bootstrap и angularjs: как не разворачивать выпадающий щелчок на родительском

Question

в bootstrap 3 и angularjs У меня есть группа списка, и для каждого элемента у меня выпадающее меню выведено справа: когда я нажимаю на раскрывающееся меню, мне бы хотелось, чтобы только выпадающее меню меню показано, но щелкнул событие распространяется на элемент

<div ng-repeat="item in items" href="" class="list-group-item" ng-click="itemSelected(item)"> 
    {{item.Name}} 
    <div class="dropdown pull-right" > 
     <div href="" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></div> 
     <ul class="dropdown-menu"> 
     <li><a href="" style="font-size:80%">Edit</a></li> 
     <li><a href="" style="font-size:80%">Delete</a></li> 
     </ul> 
    </div> 
</div> 

Когда я нажимаю на выпадающем списке я хочу, что показал только выпадающий элемент (Edit и Delete) и не называется функцией itemSelected()

Как я могу это достичь?

Благодаря

Answer 1

Вы не можете просто остановить событие от кипела событие stopPropagation методом, потому что выпадающий Bootstrap устанавливает до слушателей событий нажмите на уровне документа, поэтому пузыриться событие necessary for dropdown быть переключены. В этом случае у вас есть два варианта.

Вариант № 1 (лучший). HTML-реструктуризация. Оберните {{item.Name}} в еще один контейнер, например div, и положите на него ng-click="itemSelected(item)".

<div ng-repeat="item in items" href="" class="list-group-item"> 
    <div class="dropdown pull-right"> 
     <div href="" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></div> 
     <ul class="dropdown-menu"> 
     <li><a href="" style="font-size:80%">Edit</a></li> 
     <li><a href="" style="font-size:80%">Delete</a></li> 
     </ul> 
    </div> 
    <div ng-click="itemSelected(item)">{{item.Name}}</div> 
</div> 

Обратите внимание, что в этом случае вам нужно переместить item.NameDIV послеdropdown один, чтобы сохранить правильную структуру поплавка.

Демо:http://plnkr.co/edit/q7BhKOH6RXzgMwI3T24p?p=preview

Вариант № 2. Установите флаг в исходном объекте события, указав, что событие произошло при нажатии кнопки переключения. Если это так, верхний обработчик ngClick проигнорировал это событие.

<div ng-repeat="item in items" href="" class="list-group-item" ng-click="$event.originalEvent.dropdown || itemSelected(item)"> 
    {{item.Name}} 
    <div class="dropdown pull-right" ng-click="$event.originalEvent.dropdown = true"> 
     <div href="" class="dropdown-toggle" data-toggle="dropdown"> 
      <b class="caret"></b> 
     </div> 
     <ul class="dropdown-menu"> 
      <li> 
       <a href="" style="font-size:80%">Edit</a> 
      </li> 
      <li> 
       <a href="" style="font-size:80%">Delete</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Демо:http://plnkr.co/edit/wgiSqkEEXDIKPnFPAbSK?p=preview