AngularJS和jQuery移动 [英] AngularJS and jquery mobile

问题描述

我通过加载在AngularJS控制器的HTML的部分成NG-视图directiv。在HTML的部分看起来像这样：

I load a html-partial into a ng-view directiv via a controller in AngularJS. The html-partial looks like this:

<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移动控制。什么是错的？

The problem is that the listview does not get rendered into a jquery-mobile-control. What is wrong?

推荐答案

这问题是不相关的AngularJs。它的发生是jQuery Mobile的是不知道每一个DOM变化的，你需要给它一个提示。要adivice jQuery Mobile的有关变化，你需要触发元素上的创建事件。

This problem is not related to AngularJs. It happend that jQuery Mobile is not aware of every DOM change, and you need to give it a tip. To adivice jQuery Mobile about the change, you need to trigger a create event on the element.

按照文档（请看加强新​​的标记）：

According to the docs (look at "Enhancing new markup"):

不过，如果你通过Ajax生成内容的新标记的客户端或负载并注入到一个页面，您可以触发创建事件以处理自动初始化为包含的所有插件新的标记内。这可以任何元素（甚至是页面DIV本身）上触发，节约您的手动初始化各个插件（列表视图按钮，选择等）的任务。

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

因此​​，所有你要做的就是触发创建的内容已被列入刚过事件。

So all you got to do is to trigger the create event just after the content has been included.

我建议你创建一个指令，只是触发你的模板的事件。是这样的：

I'd suggest you to create a directive that simply triggers the event on the templates for you. Something like:

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

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

Then you just add this directive to the root element of the template:

<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的渲染之前所有更改。工作样本这里。

You could make this directive low priority, so if you use other directives that might change the template, this one would wait for all changes before telling jQuery Mobile to render. Working sample here.

这篇关于AngularJS和jQuery移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！