AngularJS + jQuery Mobile的W /无适配器和放大器;禁用路由 - 用于UI样式只 [英] AngularJS + jQuery Mobile w/ No Adapter & Disabled Routing - Used For UI Styling Only
问题描述
我学习AngularJS，并已建立了一个小型的应用程序。现在，它的功能完整的，我想用jQuery Mobile的样式不起来。
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.
本来我在下降 tigbro的jQuery的移动角适配器，但最终决定它更复杂，涉及的不是我需要的。我不是在jQuery Mobile的任何花哨的屏幕转换或页面管理功能之后 - 我只是想用它来做造型的应用和让AngularJS处理剩下的
Originally I dropped in tigbro's jquery-mobile-angular-adapter, but ultimately decided it was more complicated and involved than I needed. I'm not after any fancy screen transitions or page management features in jQuery Mobile - I just want to use it for styling the application and let AngularJS handle the rest.
我看了这个帖子，它具有相同的目标记住，尽管另一个框架，并包含一个code段禁用jQuery Mobile的路由。
I read this post, which has the same goal in mind, albeit with another framework, and contains a code snippet to disable the jQuery Mobile routing.
我申请的片断到我的脚本加载这个顺序应用程序，只需关闭标记之前：
I've applied that snippet to my application in this order of script loading, just before the close body tag:
- 的jQuery
- 段
- jQuery Mobile的
- AngularJS
这片段的位置是工作，还是有些作品，无论如何，在任何事情的风格适当（标题和主导航，基本上是）我的索引负荷只有一个，而我AngularJS路线工作得很好，但任何动态加载的模板填充我NG-认为，尽管有jQuery Mobile的数据角色（如UL列表视图等），不被jQuery Mobile的风格;他们只是普通的HTML。
This snippet placement is the only one that works, or somewhat works anyway, in that anything in my index loads styled properly (header and main nav, basically), and my AngularJS routes work just fine, but any dynamically loaded templates that populate my ng-view, despite having jQuery Mobile data-roles (ul as listview, etc.), are not styled by jQuery Mobile; they're just plain HTML.
没有任何人有一个想法，我怎么能拿这些动态加载的模板，也可以称呼？
Does anyone have an idea as to how I could get those dynamically loaded templates to also be styled?
我的索引HTML结构如下：
My index HTML structure looks like this:
<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>
这是我的模板的一个例子：
And here's an example of one of my templates:
<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>
感谢您！
推荐答案
我结束了组建这个指令：
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);
}
});
然后，每个模板的内部，包裹在一个div模板内容和应用指令存在，即：
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>
这工作，但由于setTimeout的，对于一个分裂的内容第二闪烁时加载。我还在盘算上如何如何摆脱闪光灯。
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.
要注意，的没有的该setTimeout的到位，数据角色=列表视图不会的样式（我猜，因为它必须由NG-重复填充依旧），但在视图中的任何静态内容的已的风格。
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.
这篇关于AngularJS + jQuery Mobile的W /无适配器和放大器;禁用路由 - 用于UI样式只的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
