2016-04-07 7 views
0

ソケット接続経由でバックエンドからのアップデートを取得します。バックエンドから取得したデータにデータオブジェクトを使用しながら、AngularJSで自動的に更新するFrontendを使用したいと思います。ソケットの更新中にAngularJSテンプレートを更新したままにする方法はありますか?

私には何がありますか?

テンプレート:

Status: {{unit.getStatus()}} 

コントローラ1:

function ($scope, unitFactory) { 
    // register to unit factory to get the updates and do 
    // $scope.unit = data.getUnit(); 
} 

コントローラ2:

function ($scope, unitFactory) { 
    // register to unit factory to get the updates and do 
    // $scope.unit = data.getUnit(); 
    // $scope.foo = data.getFoo(); 
} 

サービス:

ソケット:

channel.on('data', function (event) { 
    try { 
     event = JSON.parse(event);  
     // successCallback is what is given as second parameter in the `Service`.   
     $rootScope.$apply(successCallback(event)); 
    } catch (e) { 
     console.log('Error: ' + e); 
    } 
}); 

どのように協力すべき?

  1. ソケット更新は入って来、Socketsオブジェクト
  2. Sockets呼処理を欠落データ
  3. ServiceプロセスでService
  4. にコールバック関数を登録する関数によって処理されますオブジェクトにラップされたデータをコントローラに配信する必要があります。
  5. MISSINGコントローラーは、新しい更新があるたびに、データで何をしたいかを自由に行うことができます。
  6. テンプレートが自動的に更新されます。

MISSINGのお手伝いができますか?私はさまざまなアプローチを試みましたが、毎回死んでしまいました。

+0

コールバックではなくイベントを使用してみましたか? – sdfacre

答えて

0

データの約束を返してから$ state.reload()を返してみましたか?

Status: {{unit.data.getStatus()}} 

テンプレート2(コントローラ2によって使用される):(コントローラ1によって使用される)

テンプレート1:

+0

ソケットアップデートのお手伝いはどうでしょうか?私が一度だけ実行される 'get'のようなリクエストに対してはそれらを使っていたことがわかるまで。 – messy

0

は、それがデータモデルパターン 'を用いて解くガット

Status: {{foo.data.getBar()}} 

コントローラ1:

function ($scope, unitFactory) { 
    $scope.unit = unitFactory.getUnit(); 
} 

コントローラ2:

function ($scope, unitFactory) { 
    $scope.unit = unitFactory.getUnit(); 
    $scope.foo = unitFactory.getFoo(); 
} 

サービス:

function(requestFactory) { 
    var unit = { data:{} }, 
     foo = { data:{} }; 

    Sockets.socket('unit', function (response) { 
     unit.data = new Unit(response['data']); 
     foo.data = new Foo(response['foo']); 
    }); 

    return     
     getUnit: function() 
      return unit; 
     }, 

     getFoo: function() { 
      return foo; 
     } 
     // some more functions... 
    } 
} 

ソケット:

channel.on('data', function (event) { 
    try { 
     event = JSON.parse(event);  
     // successCallback is what is given as second parameter in the `Service`.   
     $rootScope.$apply(successCallback(event)); 
    } catch (e) { 
     console.log('Error: ' + e); 
    } 
}); 

それが基準となるので、データは、(テンプレートのデータが更新されたオブジェクトに格納されているので)。私はこれらの余分な属性に慣れる必要がありますdataとそれはいい探していないが、その仕事をしています。