不能使用jQuery附加onsenui CSS和Angular

Question

我正在尝试使用PhoneGap创建应用。我想列出很多新闻的列表视图。我在尝试在列表中创建新数据时遇到了这个问题。目前，当我在HTML中使用在线示例中提供的标签时，它可以正常工作。然后我尝试使用jQuery插入标记，但它们无法正常工作。

这是一个屏幕截图，显示出现了什么问题： http://cl.ly/image/1k063m2y3V3B

前两个数据只是普通的HTML，然后用jQuery插入最后一个数据。我插入相同的代码，因此它可能是Angular和jQuery冲突的问题。

相关HTML：

<ons-list style='margin: -1px 0' id="data">

 <ons-list-item modifier='chevron' class='item' ng-click='doSomething()'> <ons-row>

<ons-col width='60px'> </ons-col> <ons-col> <header> <span class='item-title'>Rorem Ipsum</span> <span class='item-label'>5h</span> </header> <p class='item-desc'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </ons-col> </ons-row> </ons-list-item>

 <ons-list-item modifier='chevron' class='item' ng-click='doSomething()'> <ons-row> <ons-col width='60px'> </ons-col> <ons-col> <header> <span class='item-title'>Rorem Ipsum</span> <span class='item-label'>5h</span> </header> <p class='item-desc'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </ons-col> </ons-row> </ons-list-item>

</ons-list> </ons-page> </ons-navigator> </ons-template>

JQuery的：

$(function() {
$("#data").append("<ons-list-item modifier='chevron' class='item' ng-click='doSomething()'> <ons-row> <ons-col width='60px'> </ons-col> <ons-col> <header> <span class='item-title'>Rorem Ipsum</span> <span class='item-label'>5h</span> </header> <p class='item-desc'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </ons-col> </ons-row> </ons-list-item>");
});