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 のデータ ロール (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>

そして、これが私のテンプレートの1つの例です:

<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ページとリストの場合、私はうまくいきました：

ページの場合:

<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 に答える
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 に答える