我正在学习AngularJS，并已构建了一个小型应用程序。现在它已经完成了功能，我想使用jQuery Mobile对其进行样式设置。
最初，我使用tigbro的jquery-mobile-angular-adapter，但最终认为它比我需要的更为复杂和复杂。我不需要jQuery Mobile中的任何精美的屏幕过渡或页面管理功能-我只想将其用于设计应用程序样式，并让AngularJS处理其余部分。
我阅读了这篇文章，尽管有另一个框架，但它的目标是相同的，并且包含一个禁用jQuery Mobile路由的代码段。
我已经按照close正文标记之前的脚本加载顺序将该代码段应用于了我的应用程序：
此代码段位置是唯一起作用的代码，或者无论如何还是可以工作的，因为索引中的任何内容均已正确设置样式（标题和主导航），并且AngularJS路由也可以正常工作，但任何动态加载的模板都会填充ng -view尽管具有jQuery Mobile数据角色（例如listview中的ul等），但不是由jQuery Mobile设置样式的；它们只是纯HTML。
有人对我如何使那些动态加载的模板也具有样式有想法吗？
我的索引HTML结构如下所示：
<body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>MyApp</h1> <a href="#/home">Home</a> <a href="#/add_item">Add</a> </div> <div data-role="content" ng-view></div> </div> <!-- Scripts --> </body>
这是我的模板之一的示例：
<ul data-role="listview" ng-controller="MyListCtrl"> <li ng:repeat="item in things"> <a href="#/item/{{ item.ID }}">{{ item.title }}<br/>{{ formatDateForDisplay(item.addDate) }}</a> </li> </ul>
谢谢！
我最终把这个指令放在一起：
angular.module('myApp.directives', []). directive('applyJqMobile', function() { return function($scope, el) { setTimeout(function(){$scope.$on('$viewContentLoaded', el.trigger("create"))},1); } });
然后在每个模板内部，将模板内容包装在div中，并在其中应用指令，即：
<div ng-controller="MyController" apply-jq-mobile> <!-- Template Content to be jQ Mobilezed --> </div>
这可以工作，但是由于setTimeout的原因，内容在加载时会闪烁一秒钟。我仍在研究如何摆脱闪光灯。
需要注意的是， 如果没有 设置setTimeout，就不会设置data-role =“ listview”的样式（我猜是因为它仍必须由ng- repeat填充），但是视图 中 的所有静态内容都已设置样式。
