使用Angular指令注入JQueryMobile列表视图模板

Question

简要介绍 - 如何通过指令为JQuery Mobile小部件注入标记，并将标记实际转换为JQM小部件。

Plnkr：http://plnkr.co/edit/3AZV93mktxPAPwU4JKgM?p=preview

给定angular指令中的templateURL，其目标内容指定JQuery Mobile listview标记，如何确保JQuery Mobile正确地对标记执行操作，以便获得正确的JQM listview小部件而不仅仅是样式化的HTML？

我目前的尝试是在链接功能中定位列表视图并调用...

$("[data-role='listview']",element).listview();

这似乎有效，因为如果我调用此函数，那么我的无序列表就会用JQM css类进行修饰，但是无序列表不会像listview函数那样被驱动。

我的指示

app.directive('testDirective', function () {

    var link=function(scope, element, attrs){
      console.log($("[data-role='listview']"));
      $("[data-role='listview']",element).listview();
    };

    return {
        restrict: 'EA',
        templateUrl : "templates/static.html",
        link: link
    };
});

模板标记JQM-listivew

<ul data-role="listview" data-inset="true">
    <li ng-repeat="item in data"><a href="#">{{item}}</a></li>
</ul>

结果应如何......

实际结果是什么

最终工作指令......

app.directive('testDirective', function () {

  var link=function(scope, element, attrs){
    console.log(element.context.innerHTML);
    var lview=$("[data-role='listview']",element);
    lview.listview();

    scope.$watchCollection("data",function(){
      console.log("watching collection");
      lview.listview("refresh");
    }); 
 };

 return {
    restrict: 'EA',
    scope:false,
    templateUrl : "templates/static.html",
    link: link
 };

}）

Answer 1

角度完成渲染后，您需要运行.listview();。

另见另一个例子：

AngularJS: How to run additional code after AngularJS has rendered a template?