3

AngularJS のコントローラーを介して ng-view ディレクティブに html-partial をロードします。html-partial は次のようになります。

<div>
    <ul data-role="listview" data-inset="true" data-theme="c">
        <li><a href="#/detailsuser/a">A</a></li>
        <li><a href="#/detailsuser/b">B</a></li>
        <li><a href="#/detailsuser/c">C</a></li>
        <li><a href="#/detailsuser/d">D</a></li>
    </ul>
</div>

問題は、リストビューが jquery-mobile-control にレンダリングされないことです。なにが問題ですか？

4

2 に答える 2

4

私はそれを働かせました。
ul 要素に追加する新しいディレクティブを作成しました。最後の li 要素がレンダリングされるまで待機してから、jqueryMobileTpl ディレクティブでトリガーを呼び出します。

app.directive('jqueryMobileTpl', function () {
    return {
        link: function (scope, elm, attr) {
            //elm.trigger('create');
        }
    };
});
app.directive('repeatDone', function () {
    return function (scope, element, attrs) {
        // When the last element is rendered
        if (scope.$last) { 
            element.parent().parent().trigger('create');
        }
    }
});

と

<div jquery-mobile-tpl>
    <ul data-role="listview" data-inset="true" data-theme="c" data-ng-repeat="customer in customers | orderBy:'lastName'" repeat-done="" ng-cloak>
        <li><a href="#/customerdetails/{{customer.id}}" rel="external">{{customer.firstName + ' ' + customer.lastName}}</a></li>
    </ul>
</div>

@CaioToOnと@Omarに感謝します!!!

于 2013-06-05T21:46:51.897 に答える
3

この問題は AngularJs とは関係ありません。jQuery Mobile が DOM のすべての変更を認識していないことがあったため、ヒントを与える必要があります。変更について jQuery Mobile に通知するcreateには、要素でイベントをトリガーする必要があります。

ドキュメントによると（「新しいマークアップの強化」を参照）：

ただし、新しいマークアップをクライアント側で生成するか、Ajax を介してコンテンツを読み込んでページに挿入する場合は、create イベントをトリガーして、新しいマークアップに含まれるすべてのプラグインの自動初期化を処理できます。これは任意の要素 (ページ div 自体も含む) でトリガーできるため、各プラグイン (リストビュー ボタン、選択など) を手動で初期化するタスクを節約できます。

したがってcreate、コンテンツが含まれた直後にイベントをトリガーするだけです。

テンプレートでイベントをトリガーするだけのディレクティブを作成することをお勧めします。何かのようなもの：

app.directive('jqueryMobileTpl', function() {
  return {
    link: function(scope, elm, attr) {
      elm.trigger('create');
    }
  };
});

次に、このディレクティブをテンプレートのルート要素に追加します。

<div jquery-mobile-tpl>
  <ul data-role="listview" data-inset="true" data-theme="c">
    <li><a href="#/detailsuser/a">A</a></li>
    <li><a href="#/detailsuser/b">B</a></li>
    <li><a href="#/detailsuser/c">C</a></li>
    <li><a href="#/detailsuser/d">D</a></li>
  </ul>
</div>

このディレクティブの優先度を低くすると、テンプレートを変更する可能性のある他のディレクティブを使用する場合、このディレクティブは jQuery Mobile にレンダリングを指示する前にすべての変更を待機します。作業サンプルはこちら.

于 2013-06-05T13:50:07.007 に答える