程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJS + jQuery Mobile w / no Adapter&Disabled Routing-仅用于UI样式大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决AngularJS + jQuery Mobile w / no Adapter&Disabled RoutIng-仅用于UI样式?

开发过程中遇到AngularJS + jQuery Mobile w / no Adapter&Disabled RoutIng-仅用于UI样式的问题如何解决?下面主要结合日常开发的经验,给出你关于AngularJS + jQuery Mobile w / no Adapter&Disabled RoutIng-仅用于UI样式的解决方法建议,希望对你解决AngularJS + jQuery Mobile w / no Adapter&Disabled RoutIng-仅用于UI样式有所启发或帮助;

我最终把这个指令放在一起:

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,并已构建了一个小型应用程序。现在它已经完成了功能,我想使用jQuery Mobile对其进行样式设置。

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

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

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

  1. jQuery的
  2. 片段
  3. jQuery Mobile
  4. AngularJS
  5. @H_262_44@

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

    谢谢!

大佬总结

以上是大佬教程为你收集整理的AngularJS + jQuery Mobile w / no Adapter&Disabled Routing-仅用于UI样式全部内容,希望文章能够帮你解决AngularJS + jQuery Mobile w / no Adapter&Disabled Routing-仅用于UI样式所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:+/now