AngularJS + jQuery Mobile w/无适配器 &禁用路由 - 仅用于 UI 样式 [英] AngularJS + jQuery Mobile w/ No Adapter & Disabled Routing - Used For UI Styling Only
问题描述
我正在学习 AngularJS 并构建了一个小型应用程序.现在它在功能上已经完成，我想使用 jQuery Mobile 对其进行样式设置.
最初我放弃了 tigbro 的 jquery-mobile-angular-adapter，但最终决定它更多比我需要的复杂和复杂.我不喜欢 jQuery Mobile 中任何花哨的屏幕转换或页面管理功能 - 我只是想用它来设置应用程序的样式，让 AngularJS 处理其余的事情.
我阅读了这篇文章，它有相同的目标记住，尽管使用另一个框架，并且包含一个代码片段来禁用 jQuery Mobile 路由.
我已按照脚本加载的顺序将该代码段应用到我的应用程序中，就在 close body 标记之前:
- jQuery
- 片段
- jQuery 移动版
- AngularJS
这个片段位置是唯一一个有效的，或者无论如何都有效的，因为我的索引加载中的任何内容都设置了正确的样式(基本上是标题和主导航)，并且我的 AngularJS 路由工作得很好，但是任何动态加载的模板填充我的 ng-view，尽管有 jQuery Mobile 数据角色(ul 作为列表视图等)，但不是由 jQuery Mobile 设计的；它们只是普通的 HTML.
有没有人知道我如何让那些动态加载的模板也有样式?
我的索引 HTML 结构如下所示:
<div data-role="页面"><div data-role="header" data-position="fixed"><h1>我的应用</h1><a href="#/home">首页</a><a href="#/add_item">添加</a><div data-role="content" ng-view></div>
<!-- 脚本-->
这是我的模板之一的示例:
<li ng:repeat="物品中的物品"><a href="#/item/{{ item.ID }}">{{ item.title }}<br/>{{ formatDateForDisplay(item.addDate) }}</a>
谢谢！
我最终整理了这个指令:
angular.module('myApp.directives', []).指令('applyJqMobile'，函数(){返回函数($scope，el){setTimeout(function(){$scope.$on('$viewContentLoaded', el.trigger("create"))},1);}});然后在每个模板内部，将模板内容包装在一个 div 中并在那里应用指令，即:
<!-- jQ Mobile化的模板内容-->这是可行的，但由于 setTimeout，加载时内容会闪烁一秒钟.我仍在研究如何摆脱闪光灯.
要注意，如果没有 setTimeout ， data-role="listview" 不会被设置样式(我猜是因为它必须仍然由 ng-repeat 填充)，但是视图中的任何静态内容都是样式的.
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 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.
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
- snippet
- jQuery Mobile
- AngularJS
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?
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>
Thank you!
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.
这篇关于AngularJS + jQuery Mobile w/无适配器 &禁用路由 - 仅用于 UI 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
