1

Angular アプリを作成しています。Windows 8 のタイルのようにメイン メニューを表示したいのですが、いくつかのタイルが他のタイルよりも大きいタイルのパターンを自動的に生成するアルゴリズムが必要です。

したがって、基本的には、メニュー項目を含む Json オブジェクトの配列として dataSource を提供するコンポーネントを作成したいと思います。

次に、コンポーネントは、すべてのタイルを収容できるようにタイルをレイアウトする必要があります。

どうすればいいですか？

angularjsを学んでいます。jQuery プラグインの使用を避けて、それなしで行うことはできますか?

4

2 に答える 2

3

外部 JS ライブラリ (mansory、同位体) なしでこれを処理できるかどうかはわかりません。しかし、あなたが踏み込むかもしれない別の罠があります。Angular は、DOM にタイルではなく promise を設定します。問題は、Mansory/Isotope がすべてのデータ (幅、高さ) を必要とせずに新しいレイアウトを (再) 計算しようとしていることです。$timeout を使用して、Angular スコープを外部ライブラリと同期する必要があります。

isotopeApp.directive('isotope', function ($timeout) {
return {
    link: function (scope, element, attrs) {
        scope.$on('postAdded', function () {
            $timeout(function () {
                element.isotope('reloadItems').isotope({
                    sortBy: 'original-order'
                });
            })
        })
    }
};

});

http://jsfiddle.net/8Qmry/

于 2013-06-10T08:07:06.107 に答える