jquery-mobile - AngularJS 和 jquery 移动版

Question

我通过 AngularJS 中的 Controller 将 html-partial 加载到 ng-view directiv 中。 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>

问题是 ListView 没有呈现为 jquery-mobile-control。怎么了？

Answer 1

我让它工作了。这是我所做的:
我制定了一个附加在 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 !!!