AngularJS + jQuery Mobile 不带适配器和禁用路由 - 仅用于 UI 样式答案

【问题标题】：AngularJS + jQuery Mobile w/ No Adapter & Disabled Routing - Used For UI Styling OnlyAngularJS + jQuery Mobile 不带适配器和禁用路由 - 仅用于 UI 样式
【发布时间】：2012-07-12 22:05:42
【问题描述】：

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

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

我阅读了this post，虽然使用的是另一个框架，但它也有相同的目标，并且包含一个代码 sn-p 来禁用 jQuery Mobile 路由。

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

jQuery
sn-p
jQuery 移动版
AngularJS

这个 sn-p 位置是唯一有效的，或者无论如何都有效的，因为我的索引中的任何内容都正确地加载了样式（基本上是标题和主导航），并且我的 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>

谢谢！

【问题讨论】：

您能提供其中一个模板的样本吗？
这至少可以帮助您：stackoverflow.com/questions/7999436/…
非常感谢您；我浪费了几天时间尝试使用各种框架和 UI 工具包来设计应用程序的样式，我实际上是从 JQM 开始的，但是当它与 AngularJS 发生冲突时就放弃了。在 ajaxComplete 上的视图 div 上触发创建效果很好

标签： javascript jquery-mobile angularjs

【解决方案1】：

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

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

【讨论】：

您是否尝试隐藏元素直到您的setTimeout 函数运行？也许$(el).hide(); 在你的setTimeout 行之前，然后是$(el).show();，一旦你调用了.trigger()。不确定它是否会起作用，但值得一试。
效果很好！我肯定有一个“Duh！我为什么没想到！？”型反应。非常感谢你，诺亚！
如果 jQuery 在 Angular 之前加载，el 将是一个包装的 jQuery 元素（而不是一个 jqLite 包装的元素），所以 el.hide() 应该可以工作。即，无需再次包装它：$(el) 不是必需的。
好吧，这根本没有意义。 el.trigger 函数在超时内被调用，而 $scope.$on 事件永远不会被触发（否则会出现一个错误，指出来自 el.trigger() 的返回值不是函数。更好的方法（经过测试）是do:$scope.$watch("$viewContentLoaded", function() { el.parent().listview("refresh"); }); ，顺带不需要再次隐藏和显示，也不会闪烁。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我几乎在做同样的事情（没有 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>

【讨论】：

【解决方案4】：

对我来说这很有效：

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'));
    });

【讨论】：

【解决方案5】：

为我工作的 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();
    }
})

【讨论】：