jquery-mobile – AngularJS和jquery mobile

我通过AngularJS中的控制器将html-partial加载到ng-view directiv中. html-partial看起来像这样：

<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>

问题是listview没有被渲染到jquery-mobile-control中.怎么了？

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

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

However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).

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

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

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.