2

Angular と Codeigniter を学ぼうとして、最初の新しいチュートリアル (CI から) を拡張しました。現在の段階では、新しい投稿を自動的に表示し、削除された投稿をページから削除し、もちろんモデル/DB を更新します。--私はこれを AngularJS にとって最も効果的な方法で行っているわけではないと思います。私のコードに関するフィードバックはそのために役立ちます。--

ただし、私の主な関心事は、Angular で差分更新を行う方法ですか? jQuery を使用してこれを達成したとき、単純にタイムスタンプを ajax URL に追加しました。次に、コントローラーでその時間を取得し、それを変数に割り当て、比較を行って追加の投稿を取得します。それはうまくいきました。新しいストーリーが存在する場合のみをプルし、存在しない場合はオーバーヘッドはあまりありません。

ただし、現在 Angular では、リクエストごとに (5 秒ごとに) JSON データ全体をプルしています。大規模なアプリの場合、これは過剰な帯域幅を消費します。それを区別して新しい投稿のみをプルするにはどうすればよいですか?

controllers.js (角度コントローラー)

var timestamp = '';
function NewsListCtrl($scope, $http, $timeout) { 

$scope.newsRequest = function(){
    $http.get('/ci/index.php/news/get_news_ajax/' + timestamp).success(function(data) {
        timestamp = $.now();
        $scope.news = data;
    });
};
$scope.newsRequest();
setInterval(function(){
    $scope.$apply(function(){
           $scope.newsRequest();
    });
}, 5000);

}

上記のコードは、時間を URL の 3 番目のセグメント (Codeigniter によると 3 番目) に正常に渡します。ページが最初に読み込まれると、すべての投稿が表示されます。その後、newsRequest() が再び起動すると、空白のページが表示されます。新しい投稿がないため、空の配列が $scope.news に割り当てられていると思います。新しい投稿が追加されるようにするにはどうすればよいですか?

(そして、私が言ったように、AngularJS ng-repeat を最大限に活用していないと思います。誰かがより良い解決策を持っている場合は、私に教えてください!)

4

2 に答える 2

1

最終的には、必要な方法で物事を機能させることができました。私の論理には大きな欠陥がありました。上記のコードでは、現在の時刻$.now()を渡そうとし続けましたが、有効なロジックを得るには、最後の投稿の時刻を渡す必要がありました。そうすれば、最後にプルした投稿の後に作成された投稿があるかどうかを比較できます。

var timestamp = '';
function NewsListCtrl($scope, $http, $timeout) { 
    $scope.news = [];
    $scope.newsRequest = function(){
        $http.get('/ci/index.php/news/get_news_ajax/' + timestamp).success(function(data) {
            $scope.news = data.recent.concat($scope.news); 
            if (data.recent[0] != null){
                timestamp = data.recent[0].time;
            }
        });
    };
$scope.newsRequest();
setInterval(function(){
    $scope.$apply(function(){
           $scope.newsRequest();
    });
}, 5000);

もう 1 つの大きな問題は、データオブジェクト内に配列が含まれていたことです。そのため、その配列内のものにアクセスする必要がありました。私は自分の見解でそれをいくらか補っていましたが、それはちょっとずさんでした. Angular Controller で処理できるようにする方がはるかにクリーンです。

指摘すべきことは、次のコード行です。

$scope.news = data.recent.concat($scope.news);

最初に機能させた後、最初は data.recentを$scope.newsの最後に連結していました。しかし、このようにすると、新しいアイテムがビューの一番上ではなく最後に表示されます。$scope.newsを新しいオブジェクト/配列に連結することで、先頭に追加するのは簡単な修正でした。

于 2013-03-19T20:17:37.280 に答える
1

読み込んだデータを $scope.news に連結する必要があります。配列なら簡単

 $scope.news.concat(data);

それ以外の場合は、ロードされたデータを反復処理して新しいビットを追加する必要がある場合があります。

于 2013-03-15T20:59:27.130 に答える