jquery popover не работает с angularjs

Question

есть хороший трюк, чтобы использовать jquery popover и который заполняет скрытый div нашими данными и сообщает нажатой кнопке, чтобы показать popover и отобразить div как содержимое этого popover. когда у вас есть более одного div, вам нужно разделить их по классам, и в этом мы столкнулись с проблемой. Коды angularjs (такие как ngrepeat) не преобразуются в html-код, и на самом деле нет html div, чтобы сообщить jquery для рендеринга (если вы посмотрите на источник страницы, angularjs ng-repeatts не извлекаются в html-элементы и оставались как угловые синтаксисы). Потому что те divs будут генерироваться через ngrepeat, а jquery не понимает, что не будет html div. Каково решение? (Вот мой код :)

<script type="text/javascript"> 
$(function() { 
$('.product-show').each(function() { $(this).popover({ 
html : true , 
content : function() { return $(".editform"+this.id).html(); }, 
placement : 'bottom' 
     }); 
    }); 
}); 
</script> 
<li ng-repeat='product in products' class="span3"> 
<a class='btn btn-mini product-show' id={{product.id}} data-value={{product.id}} >show</a> 
<div class="editform{{product.id}} hide"> 
Hello! 
</div> 
</li> 

Answer 1

Проблема здесь состоит в том, что ваша функция JQuery вызывается перед угловым даже начал отрисовку нг-повтора (отсюда и пустую коллекцию, когда в функции JQuery).

Я попрошу вас использовать popover проекта Angular UI Bootstrap, см. here. Они написаны полностью с угловыми и будут хорошо играть с вашим угловым шаблоном.

Если вам все еще нужно/хотите/предпочитаете подход jQuery, вы можете подумать о том, чтобы написать свой собственный directive. Обычно рекомендуется, когда вы хотите выполнить DOM-манипуляцию.