9

AngularJS スクリプトのサンプルをいくつか探していたときに見つけましたが、Angular モジュールとコードのディレクティブ部分について頭を悩ませているようには見えません。loadMore() 関数を編集して ReSTful API から json リソースを取得することができましたが、無限スクロールでうまく機能します。私は、空き時間にこの 1 週間、AngularJS を読んだり試したりし始めたばかりです...

フィドルのオリジナル (オリジナルの作者に感謝します): http://jsfiddle.net/vojtajina/U7Bz9/

function Main($scope) {
    $scope.items = [];

    var counter = 0;
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.push({id: counter});
            counter += 10;
        }
    };

    $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        var raw = elm[0];

        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

私が変更：

function Main($scope, $http) {

    $scope.phones = [];

    $scope.loadMore = function() {
        $http.get('http://www.somewhere.com/api/phones').success(function(data) {
            if($scope.phones.length > 0) {
                $scope.phones = $scope.phones.concat(data);
            }
            else {
                $scope.phones = data;
            }
        });
    };

    $scope.loadMore();
}
4

1 に答える 1

5

私はこれを試してみます：

このディレクティブは、ディレクティブのインスタンスごとに呼び出されるリンク関数を返します。そのため、ロード時に実行され、スクロール時のイベント ハンドラーが各リスト項目にアタッチされます。高さの計算が true の場合、現在の li へのディレクティブである属性「whenScrolled」をアタッチし、Angular に DOM の再コンパイルを強制します。DOM は新しいディレクティブを処理します。このディレクティブは loadMore() を呼び出し、さらに追加します。リストへのアイテム。

Angular はリスト項目に新しく追加されたディレクティブを処理せず、on scroll ハンドラーが追加されないため、apply が必要です。

于 2013-05-23T07:29:26.947 に答える