Question

有一个很好的技巧，使用jquery popover，并使用我们的数据填充隐藏的div，并告诉单击的按钮显示一个弹出窗口并将div渲染为该popover的内容。当你有多个div时，你必须按类分开它们，这就是我们遇到问题的地方。 angularjs代码（例如ngrepeat）不会转换为html代码，实际上没有html div来告诉jquery渲染（如果你看一下页面的来源，angularjs ng-repeats不会被提取到html元素并保持为角度语法）。因为这些div将通过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函数在angular甚至开始渲染ng-repeat之前被调用（因此在你的jQuery函数中是空集合）。

我将鼓励您使用Angular UI Bootstrap项目的popover，请参阅here。这些都是完全用角度写的，并且可以很好地与角度模板一起使用。

如果您仍然需要/想要/更喜欢jQuery方法，您可以考虑编写自己的directive。通常建议您在执行DOM操作时使用。

jquery popover不适用于angularjs

1 个答案: