我正在学习 AngularJS 并构建了一个小型应用程序。现在它的功能已经完成，我想使用 jQuery Mobile 来设计它的样式。
最初我掉进了tigbro's jquery-mobile-angular-adapter ，但最终决定它比我需要的更复杂和复杂。我不想在 jQuery Mobile 中使用任何花哨的屏幕转换或页面管理功能 - 我只是想用它来设置应用程序的样式，让 AngularJS 处理其余部分。
我读了this post ，它具有相同的目标，尽管使用了另一个框架，并且包含一个代码片段来禁用 jQuery Mobile 路由。
我已按照此脚本加载顺序将该代码段应用于我的应用程序，就在关闭正文标记之前:
- jQuery
- 片段
- jQuery 手机
- AngularJS
这个片段放置是唯一有效的，或者无论如何都有效的，因为我的索引中的任何内容都加载了正确的样式(基本上是标题和主导航)，并且我的 AngularJS 路由工作得很好，但是任何动态加载的模板填充我的 ng-view，尽管有 jQuery Mobile 数据 Angular 色(ul 作为 ListView 等)，但 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 填充)，但是 View 中的任何静态内容都是样式的。
关于javascript - AngularJS + jQuery Mobile w/No Adapter & Disabled Routing - 仅用于 UI 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11461426/