-1

使用 jquery popover 有一个很好的技巧，那就是用我们的数据填充隐藏的 div，并告诉单击的按钮显示一个 popover 并将 div 呈现为该 popover 的内容。当你有多个 div 时，你必须按类将它们分开，这就是我们遇到问题的地方。angularjs 代码（例如 ngrepeat）不会转换为 html 代码，实际上没有 html div 告诉 jquery 渲染（如果您查看页面的源代码，则不会将 angularjs ng-repeat 提取到 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>
4

1 回答 1

1

这里的问题是，在 Angular 甚至开始渲染 ng-repeat 之前调用了 jQuery 函数（因此在 jQuery 函数中是空集合）。

我会鼓励您使用 Angular UI Bootstrap 项目的弹出框，请参见此处。这些完全是用 angular 编写的，可以很好地与您的 angular 模板配合使用。

如果您仍然需要/想要/更喜欢 jQuery 方法，您可以考虑编写自己的指令。通常在您想要执行 DOM 操作时推荐。

于 2013-09-09T15:44:19.443 回答