JQuery .on с угловыми элементами

Question

Таким образом, у меня есть этот угловой элемент, полученный:

<div ng-if="req.Expanded" ng-click="req.Expanded = false"> 
    <i class="fa fa-angle-down drill-item cursor" 
     title="Get Details" data-req-id="{{req.Id}}"></i> 
</div> 

Это расширяет родственный элемент ниже, показывающий детализировать информацию.

На готов я поставил его так:

$('.drill-item').on('click', function(event) { 
    alert('drilled!'); 
    $.post(
     ... 
    ); 
}); 

Это .on() метод срабатывает только штраф в первый раз вокруг, но когда угловые вызовы удалить DIV с «.drill-п» класс и добавить новый, анонимный обратный вызов никогда не срабатывает.

Если я настроил функцию динамического вызова .on() после каждого временного изменения объектов, которые она работает, но это похоже на хак, поскольку .on() должен работать с содержимым, которое изначально не загружалось , правильно?

1) Почему это кажется неудачным для меня, если я не позвоню .on() еще раз?

2) Каков наилучший способ сделать это?

Answer 1

Создание функции в контроллере

$scope.MyFunction = function() { 
    alert('drilled!'); 
    // Do something 

}; 

Использование атрибут нг нажмите

<div ng-click="MyFunction()" 

Answer 2

Во время первой загрузки вы связываете обработчик события непосредственно к элементу. Событие не будет срабатывать для каких-либо элементов, добавленных позже. Вы можете попробовать

$(document).on('click', '.drill-item', function(event) { 
    alert('drilled!'); 
    $.post(
     ... 
    ); 
});