0

JSON オブジェクトの形式でクライアント側に「プッシュ」されたデータを持つ websocket ベースのアプリケーションがあります。

AngularJS を介して Websocket プロトコル経由で取得した JSON を使用して、DOM を自動的に更新する必要があります。これを行う簡単な方法が見つかりません。Websocket 取得コードを変更する方法はありません。

この投稿は、Socket.io ユーザー (私は使用していません) 向けですが、かなり大きな JavaScript を使用しているため、使用するのが面倒ですが、この投稿では変数を$windowオブジェクトにアタッチすることを提案していますが、これは最善の方法ではありません。物事について行くこと。

次の 2 つのことを前提とします。

  • AngularJSの外部にある、DOMを自動的に更新する必要があるJSONの一部があります
  • これを達成するために大規模なコード要件を回避しようとしています

必要なものをどのように達成できますか?

JSONの更新時にDOM（テーブル）を更新するためにjsfiddleをいじっていますが、JSONはAngularコード内にあります。私のJSONはその外にあります。

4

1 に答える 1

1

さて、これを行う方法を予想どおりに見つけるのは簡単ではありませんが、私が見つけた1 つの解決策の一般的な要点を次に示します。他の解決策は大歓迎です。

必要がある：

  • を使用して、JSON 値のデフォルト セットを定義しますng-init。これらは、データが Angular スコープに渡される前に表示されるものです。これは実際には空の JSON オブジェクトである可能性があるため、追加のコーディングはほとんど必要ありません。

  • 別の非角度コード内で、ng-initディレクティブをアタッチしたオブジェクトのスコープを取得し、$applyメソッドを使用してスコープ内の JSON を更新する必要があります。

これが私が話していることです。タグのリストがあり、外部ソースから新しいタグを追加したいとします。

<ul id="tags" ng-init="tags = [{name: 'somejson'}]">
    <li ng-repeat="tag in tags">
        {{tag.name}}
    </li>
</ul>

後で外部から角度への JavaScript で参照できるように、ul要素にフィールドを指定したことに注意してください。idコードは簡単です。タグをループし、「somejson」をli.

次に、外部関数でこの JSON を更新します。

setTimeout(function() { 
    var scope = angular.element($("#tags")).scope();

    scope.$apply(function() {
        scope.tags.push({name: 'ANOTHER LI HERE PLEASE'});
    });
}, 5000);

コードを呼び出しにラップしたsetTimeout()ので、更新に 5 秒かかり、実際に DOM の変更を確認できます。最初に#tags要素のスコープを取得し、次に$applyスコープ内の任意の変数にカスタム関数を適用します。

この場合、カスタム LI を追加しています。ただし、私自身のコードでは.push()、setTimeout 内ではなく、サーバーからデータを取得するときに、WebSocket から取得した JSON を文字通りこのメソッドに押し込みます。

ここにJSFiddleがあります。

于 2013-10-24T16:04:16.577 に答える