jquery-mobile – AngularJS和jquery mobile

<div>
    <ul data-role="listview" data-inset="true" data-theme="c">
        <li><a href="#/detailsuser/a">A</a></li>
        <li><a href="#/detailsuser/b">B</a></li>
        <li><a href="#/detailsuser/c">C</a></li>
        <li><a href="#/detailsuser/d">D</a></li>
    </ul>
</div>

此问题与AngularJs无关.事实上,jQuery Mobile并不知道每个DOM的变化,你需要给它一个提示.要了解有关更改的jQuery Mobile,您需要在元素上触发create事件.

根据docs(看看“增强新标记”)：

所以你要做的就是在内容被包含之后触发创建事件.

我建议你创建一个指令,简单地为你触发模板上的事件.就像是：

app.directive('jquerymobileTpl',function() {
  return {
    link: function(scope,elm,attr) {
      elm.trigger('create');
    }
  };
});

然后,您只需将此指令添加到模板的根元素：

<div jquery-mobile-tpl>
  <ul data-role="listview" data-inset="true" data-theme="c">
    <li><a href="#/detailsuser/a">A</a></li>
    <li><a href="#/detailsuser/b">B</a></li>
    <li><a href="#/detailsuser/c">C</a></li>
    <li><a href="#/detailsuser/d">D</a></li>
  </ul>
</div>

您可以将此指令设置为低优先级,因此如果您使用可能更改模板的其他指令,则在告知jQuery Mobile呈现之前,此指令将等待所有更改.工作样本here.