我通过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.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。