AngularJS + jQuery Mobile w/ No Adapter & Disabled Routing - Used For UI Styling Only

Question

I am learning AngularJS and have built a small application. Now that it\'s functionally complete, I\'d like to style it up using jQuery Mobile.

Originally I dropped

Answer 1

I'm pretty much working on the same thing (no jqm angular adapter). Here's my directive that gets triggered after the last element of the repeat:

Application.Directives.directive('jqmCollapsibleRepeat', function () {
  return function (scope, element, attrs) {
    if (scope.$last) {
        $(element).parent().trigger("create");
    }
  };
});

and here's part of my view that uses it:

<div data-role="collapsible" data-collapsed="true" data-transition="slide" ng-repeat="document in documents" jqm-collapsible-repeat>
    <h3>{{document.FileName}}</h3>
    ...
</div>

Answer 2

For some reason, el.trigger("create") doesn't work for me. After looking at the angularjs-jqm-adapter, I found it uses el.parent().trigger("create"), which it works for me.

Answer 3

for jqm pages and lists for me worked:

For pages:

<div applyjqmobile data-role="page" >

and for the list:

<li lijqmobile ng-repeat="aviso in avisos"  data-icon="false" >

And directives:

.directive('applyJqMobile', function() {
    return function($scope, el) {
        console.log('applyJqMobile');
        $(el).hide();
        setTimeout(function(){$scope.$on('$viewContentLoaded', el.parent().trigger("create"))},1);
        $(el).show();
    }
}).directive('liJqMobile', function() {
    return function($scope, el) {
      console.log('liJqMobile');
      $(el).hide();
      setTimeout(function(){ $scope.$on('$viewContentLoaded', el.parent().listview('refresh'))},1);
      $(el).show();
    }
})

Answer 4

I ended up putting together this directive:

angular.module('myApp.directives', []).
    directive('applyJqMobile', function() {
        return function($scope, el) {
            setTimeout(function(){$scope.$on('$viewContentLoaded', el.trigger("create"))},1);
        }
    });

Then inside of each template, wrap the template content in a div and apply the directive there, i.e.:

<div ng-controller="MyController" apply-jq-mobile>
<!-- Template Content to be jQ Mobilezed -->
</div>

This works, but because of the setTimeout, the content flashes for a split second when loading. I'm still working on figuring how how to get rid of the flash.

To note, without the setTimeout in place, the data-role="listview" wouldn't be styled (I'm guessing since it had to be populated by ng-repeat still), but any static content in the view was styled.

Answer 5

For me this worked:

html:

<ul data-role="listview" data-filter="true" data-filter-placeholder="Suchen" data-inset="true">
    <li ng-repeat="alert in alerts" li-jq-mobile>
        {{name}}
    </li>
</ul>

js:

angular.module('alertList', [])
    .directive('liJqMobile', function() {
        return function($scope, el) {
            $scope.$on('$viewContentLoaded', el.parent().listview('refresh'));
    });