当前位置: 首页 > 面试题库 >

AngularJS + jQuery Mobile w / no Adapter&Disabled Routing-仅用于UI样式

盖锦程
2023-03-14
问题内容

我正在学习AngularJS,并已构建了一个小型应用程序。现在它已经完成了功能,我想使用jQuery Mobile对其进行样式设置。

最初,我使用tigbro的jquery-mobile-angular-adapter,但最终认为它比我需要的更为复杂和复杂。我不需要jQuery
Mobile中的任何精美的屏幕过渡或页面管理功能-我只想将其用于设计应用程序样式,并让AngularJS处理其余部分。

我阅读了这篇文章,尽管有另一个框架,但它的目标是相同的,并且包含一个禁用jQuery Mobile路由的代码段。

我已经按照close正文标记之前的脚本加载顺序将该代码段应用于了我的应用程序:

  1. jQuery的
  2. 片段
  3. jQuery Mobile
  4. AngularJS

此代码段位置是唯一起作用的代码,或者无论如何还是可以工作的,因为索引中的任何内容均已正确设置样式(标题和主导航),并且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填充),但是视图 的所有静态内容都已设置样式。



 类似资料:
  • 本文向大家介绍详解angularjs 关于ui-router分层使用,包括了详解angularjs 关于ui-router分层使用的使用技巧和注意事项,需要的朋友参考一下 最近感觉有很多学angular 的童鞋在路由问题中还不清楚怎么使用。其实我之前也是一直晕晕的不懂怎么用,现在要好得多了。在这里就记录下ui-router使用。 就已目前做的这个项目来介绍下怎么使用吧。Note:最好是按照层次规则

  • 问题内容: 我有一个现有的网站,上面有很多用表格布置的旧页面和表格,我正尝试逐步过渡到CSS。我想使用Twitter Bootstrap样式表-特别是表单样式- 但仅在我明确要求它们的页面部分中使用。例如,我可能将整个表单围绕在div中,如下所示: 我希望所有其他形式保持与现在相同,因为我将无法同时更改所有形式。有没有简单的方法可以做到这一点?我可以遍历Bootstrap CSS中的每种样式,并添

  • 问题内容: 我将UI路由器用于主菜单的选项卡以及一种状态(用户)内的链接。用户状态有一个用户列表,当单击一个用户时,我只想重新加载子状态,但是它正在重新加载子状态和父状态(用户)。 这是我的代码: 这是单击用户时在我的父控制器(UserController)中调用的函数: 假设我处于users.userGroups状态,当我单击另一个用户时,只希望重新加载users.userGroups状态。这可

  • 问题内容: 我们正在寻找构建正在创建的应用程序前端的选项,并正在尝试评估一种对我们有用的工具,并为我们提供前进的最佳平台。 这是一个Node.js项目。我们最初的计划是使用Express并沿这条路线走,但是我们决定在开始此阶段之前,最好回顾一下那里的内容。我们的应用程序有几个我们认为不适合单页模型的领域,因为它们是从应用程序的角度关联的,而不是从一个角度来看的。 我们已经看到了一些可用于构建客户端

  • 问题内容: 这是我的CSS块: 我只希望IE 7、8和9能够“看到” 最简单的方法是什么? 问题答案: 更新2017 根据环境的不同,在IE10 +中已[正式弃用并删除.aspx)了条件注释。 原版的 最简单的方法可能是在HTML中使用Internet Explorer条件注释 您可以使用许多技巧(例如下划线hack),这些技巧将仅允许您将样式表中的IE作为目标,但是如果要在所有平台上将IE的所有

  • 我们的前端样式实在是太丑了,让我们想办法来美化一下它们吧——这时候我们就需要一个前端框架来帮助我们做这件事。这里的前端框架并不是指那种MV*框架,而是UI框架。 响应式设计 考虑到易学程度,以其响应式设计的问题,我们决定用Bootstrap来作为这里的前端框架。Bootstrap是Twitter推出的一个用于前 端开发的开源工具包,似乎也是当前“最受欢迎”的前端框架。它提供了全面、美观的文档。你能