3

我通过 AngularJS 中的控制器将 html-partial 加载到 ng-view 指令中。html 部分看起来像这样：

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

问题是列表视图没有呈现到 jquery-mobile-control 中。怎么了？

4

2 回答 2

4

我让它工作。这就是我所做的：
我做了一个新指令，我附加在 ul 元素上。它一直等到最后一个 li 元素被渲染，然后我调用 jqueryMobileTpl 指令上的触发器。

app.directive('jqueryMobileTpl', function () {
    return {
        link: function (scope, elm, attr) {
            //elm.trigger('create');
        }
    };
});
app.directive('repeatDone', function () {
    return function (scope, element, attrs) {
        // When the last element is rendered
        if (scope.$last) { 
            element.parent().parent().trigger('create');
        }
    }
});

和

<div jquery-mobile-tpl>
    <ul data-role="listview" data-inset="true" data-theme="c" data-ng-repeat="customer in customers | orderBy:'lastName'" repeat-done="" ng-cloak>
        <li><a href="#/customerdetails/{{customer.id}}" rel="external">{{customer.firstName + ' ' + customer.lastName}}</a></li>
    </ul>
</div>

谢谢@CaioToOn 和@Omar ！！！

于 2013-06-05T21:46:51.897 回答
3

这个问题与 AngularJs 无关。碰巧 jQuery Mobile 不知道每一个 DOM 变化，你需要给它一个提示。要让 jQuery Mobile 了解更改，您需要create在元素上触发一个事件。

根据文档（查看“增强新标记”）：

但是，如果您在客户端生成新的标记或通过 Ajax 加载内容并将其注入页面，则可以触发 create 事件来处理新标记中包含的所有插件的自动初始化。这可以在任何元素（甚至是页面 div 本身）上触发，从而为您节省手动初始化每个插件（listview 按钮、选择等）的任务。

因此，您所要做的就是create在包含内容后立即触发事件。

我建议您创建一个指令，只需为您触发模板上的事件。就像是：

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 呈现。工作样本在这里。

于 2013-06-05T13:50:07.007 回答