Briefly - How to inject markup for JQuery Mobile widgets by way of a directive and have the markup actually convert into a JQM widget.
Plnkr: http://plnkr.co/edit/3AZV93mktxPAPwU4JKgM?p=preview
Given a templateURL within an angular directive, whose target content specifies JQuery Mobile listview markup, how do I ensure that the markup is correctly acted upon by JQuery Mobile so that I get a proper JQM listview widget instead of just styled HTML?
My current attempt is to target the listview within the linking function and call...
$("[data-role='listview']",element).listview();
This does seem to have an effect in that if I call this function my unordered list is is then decorated with JQM css classes, but the unordered list is not widgetized as expected by the listview function.
My Directive
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
};
});
Template Markup JQM-listivew
<ul data-role="listview" data-inset="true">
<li ng-repeat="item in data"><a href="#">{{item}}</a></li>
</ul>
What the result should look like...
What the result actually looks like
Final Working Directive...
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
};
})
