AngularJS+jQuery Mobile w/无适配器&禁用路由-仅用于UI样式

AngularJS + jQuery Mobile w/ No Adapter & Disabled Routing - Used For UI Styling Only

本文关键字：路由 用于 样式 UI Mobile 适配器 amp AngularJS+jQuery      更新时间：2023-09-26

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

最初，我加入了tigbro的jquery移动角度适配器，但最终决定它比我需要的更复杂、更复杂。我不想在jQuery Mobile中使用任何花哨的屏幕转换或页面管理功能——我只想用它来设计应用程序的样式，并让AngularJS来处理其余的功能。

我读过这篇文章，虽然有另一个框架，但它也有同样的目标，并包含一个禁用jQueryMobile路由的代码片段。

我已经按照脚本加载的顺序将该片段应用到了我的应用程序中，就在close-body标记：之前

  1. jQuery
  2. 摘录
  3. jQuery Mobile
  4. AngularJS

这个片段放置是唯一有效的，或者说在某种程度上有效的，因为我的索引中的任何东西都可以正确地加载样式（基本上是头和主导航），我的AngularJS路由也可以正常工作，但填充我的ng视图的任何动态加载的模板，尽管具有jQuery Mobile数据角色（ul as 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，数据角色="listview"将不会被设置样式（我猜，因为它必须由ng repeat仍然填充），但视图中的任何静态内容都是样式。

由于某些原因，el.trigger（"create"）对我不起作用。在查看angularjs-jqm适配器后，我发现它使用了elparent（）.trigger（"create"），它对我有效。

我几乎在做同样的事情（没有jqm角度适配器）。这是我的指令，它在重复的最后一个元素之后被触发：

Application.Directives.directive('jqmCollapsibleRepeat', function () {
  return function (scope, element, attrs) {
    if (scope.$last) {
        $(element).parent().trigger("create");
    }
  };
});

以下是我使用它的部分观点：

<div data-role="collapsible" data-collapsed="true" data-transition="slide" ng-repeat="document in documents" jqm-collapsible-repeat>
    <h3>{{document.FileName}}</h3>
    ...
</div>

对我来说，这很有效：

html:

<ul data-role="listview" data-filter="true" data-filter-placeholder="Suchen" data-inset="true">
    <li ng-repeat="alert in alerts" li-jq-mobile>
        {{name}}
    </li>
</ul>

js:

angular.module('alertList', [])
    .directive('liJqMobile', function() {
        return function($scope, el) {
            $scope.$on('$viewContentLoaded', el.parent().listview('refresh'));
    });

对于jqm页面和列表我工作过：

对于页面：

<div applyjqmobile data-role="page" >

对于列表：

<li lijqmobile ng-repeat="aviso in avisos"  data-icon="false" >

和指令：

.directive('applyJqMobile', function() {
    return function($scope, el) {
        console.log('applyJqMobile');
        $(el).hide();
        setTimeout(function(){$scope.$on('$viewContentLoaded', el.parent().trigger("create"))},1);
        $(el).show();
    }
}).directive('liJqMobile', function() {
    return function($scope, el) {
      console.log('liJqMobile');
      $(el).hide();
      setTimeout(function(){ $scope.$on('$viewContentLoaded', el.parent().listview('refresh'))},1);
      $(el).show();
    }
})
相关文章：