Два нг-клика на одном и том же div

Question

Так что я искал ответа для этого, но я просто не мог найти ответ. Итак, у меня есть ng-repeat элементов, которые находятся в определенном классе = "list-items". Когда я нажимаю на каждый элемент в элементах, он должен выполнять функцию. Внутри каждого списка у меня есть кнопка удаления, которую я бы хотел удалить при нажатии.

Так некоторый код для справки:

<div ng-click="executeCallback($index)" class="list-items"> 
     <div class="item-info"> 
      <span>some info here</span> 
     </div> 
     <button ng-click="removeItem($index)">X</button> 
</div> 

Так что я сделал прямо сейчас, в моем CSS, я попытался с помощью позиции абсолютного на кнопку и г-индекса, как 10000, чтобы показать, что она больше чем, но когда я нажимаю кнопку removeItem, она по-прежнему вызывает функцию executeCallback. Я не хочу, чтобы он вызывал функцию executeCallback.

Есть ли способ, чтобы функция removeItem вызывалась только при нажатии кнопки удаления, а не родительского класса?

Answer 1

Вы можете добавить несколько событий в одном нг щелчка.

<div ng-click="executeCallback($index)" class="list-items"> 
    <div class="item-info"> 
     <span>some info here</span> 
    </div> 
    <button ng-click="removeItem($index);$event.stopPropagation()">X</button> 

Answer 2

Директивы, подобные ngClick и ngFocus, выставляют объект $event в рамках этого выражения. Объект является экземпляром jQuery Event Object, когда присутствует jQuery или аналогичный объект jqLite. Source

Вы можете использовать это прямо в шаблоне HTML, чтобы остановить его распространение, позвонив по телефону $event.stopPropagation(). Просто добавьте его на button и вы должны быть хорошо:

<button ng-click="removeItem($index);$event.stopPropagation()">X</button>