9

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

最初我加入了tigbro 的 jquery-mobile-angular-adapter，但最终决定它比我需要的更复杂和复杂。我不喜欢 jQuery Mobile 中的任何花哨的屏幕转换或页面管理功能——我只想用它来设置应用程序的样式，让 AngularJS 处理其余的事情。

我读了这篇文章，虽然使用了另一个框架，但它具有相同的目标，并且包含一个禁用 jQuery Mobile 路由的代码片段。

我已经按照脚本加载的顺序将该代码段应用于我的应用程序，就在关闭正文标记之前：

  1. jQuery
  2. 片段
  3. jQuery 移动
  4. AngularJS

这个片段放置是唯一有效的，或者无论如何都有效的，因为我的索引中的任何内容都正确地加载了样式（基本上是标题和主导航），并且我的 AngularJS 路由工作得很好，但是任何填充我的 ng 的动态加载的模板-view，尽管有 jQuery Mobile 数据角色（ul 作为 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>

谢谢！

4

5 回答 5

8

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

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 填充），但是视图中的任何静态内容都被设置了样式。

于 2012-07-13T16:55:01.693 回答
1

出于某种原因，el.trigger("create")对我不起作用。在查看了 angularjs-jqm-adapter 之后，我发现它使用了el。parent() .trigger("create")，它对我有用。

于 2013-04-02T21:06:32.497 回答
0

我几乎在做同样的事情（没有 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>
于 2013-05-30T19:34:44.137 回答
0

对我来说，这很有效：

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'));
    });
于 2013-10-24T18:43:05.193 回答
0

为我工作的 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();
    }
})
于 2013-11-14T16:58:02.257 回答