Предотвратить поведение привязки по умолчанию, если установлен флажок внутри

Я использую Angular ui-bootstrap для аккордеона, а для заголовка панели мне также нужен флажок, который создается внутри тега привязки с помощью ui-bootstrap. Это выглядит так (флажок находится внутри <label> из-за стиля):

<a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
   <span>Some headline</span>
   <label class="checkbox-toggle-btn">
      <span>Activate</span>
      <input data-ng-model="selected[service.name]" type="checkbox" ng-checked="selected[service.name]">
      <i></i>
   </label>
</a>

При нажатии на флажок (<label>) он не ведет себя как флажок, но щелкается <a>, и аккордеон расширяется.

Как я могу предотвратить поведение тега <a> по умолчанию, если щелкнуть внутри <label>? Могу ли я использовать директиву для метки и получить доступ к родительскому элементу?


javascript html angularjs angular-ui-bootstrap
person swolfish    schedule 08.09.2014    source источник
comment
Вы пробовали e.stopPropagation(); на <a> клике по тегу?   -  person hahaha    schedule 08.09.2014
comment
Я пробовал, никакого эффекта.   -  person swolfish    schedule 08.09.2014
comment
на самом деле e.stopPropagation(); должен быть на клике по метке, поэтому, чтобы предотвратить любые родительские вызовы, добавление его в тег ‹a› только остановит родительские вызовы ‹a›   -  person hahaha    schedule 08.09.2014
comment
Для начала прекратите создавать недопустимый HTML — label считается «интерактивным контентом», и поэтому он не может быть потомком элемента a. (И для input то же самое, конечно.)   -  person CBroe    schedule 08.09.2014
comment
@CBroe - Вы правы, но я делаю это так из-за структуры аккордеона ui-bootstrap. Может быть, это должно быть сделано по-другому, не знаю этого в данный момент.   -  person swolfish    schedule 08.09.2014

Ответы (1)


arrow_upward
5
arrow_downward

Попробуйте подписаться

<label ng-click="$event.stopPropagation();"></label>
person cevek    schedule 08.09.2014
comment
Я считаю, что это должно быть внутри директивы ng-checked, а не ng-click в теге привязки. Или, может быть, вам нужно добавить ng-click к метке и выполнить эту операцию. - person Mike Perrenoud; 08.09.2014
comment
Возможно, ‹label ng-click=$event.stopPropagation();› - person cevek; 08.09.2014
comment
Да, это рабочее решение, stopPropagation() для тега label, спасибо. - person swolfish; 08.09.2014
comment
@swolfish, вы можете принять правильный ответ, как только вам будет предоставлено лучшее решение. благодарю вас. - person Noypi Gilas; 08.09.2014
comment
@Noypi - Да, я знаю, но жду принятия редактирования, чтобы быть полностью правильным. ;) - person swolfish; 08.09.2014