ファクトリオブジェクトをファクトリオブジェクトにバインドする

Question

ファクトリでwebsocketフィードに接続しているので、リアルタイムのビットコインの価格データが表示されます。

オブジェクトとしてservice.pricesをwebsocketFactoryに定義し、コントローラにwsvm.prices = websocketFactory.pricesを設定します。

プロパティはビューでは更新されていませんが、コンソールでは正しくログされています。

コード：

工場

app.factory('websocketFactory', ['$http', function($http) { 
 
    var service = {} 
 
    service.prices = { 
 
    "btc": 0 
 
    } 
 
    service.gdax = function() { 
 
    const socket = new WebSocket('wss://ws-feed.gdax.com') 
 
    var message = { 
 
     "type": "subscribe", 
 
     "channels": [{ 
 
     "name": "ticker", 
 
     "product_ids": [ 
 
      "BTC-USD" 
 
     ] 
 
     }, ] 
 
    } 
 

 
    socket.addEventListener('open', function(event) { 
 
     socket.send(JSON.stringify(message)); 
 
    }) 
 

 
    // Listen for messages 
 
    socket.addEventListener('message', function(event) { 
 
     var dataObj = JSON.parse(event.data) 
 
     if (dataObj.price) { 
 
     console.log(dataObj.price) //logging real time data 
 
     service.prices.btc = dataObj.price //this should be updating the view 
 
     } 
 
    }); 
 
    } 
 

 
    return service 
 
}])

コントローラ

app.controller('WebsocketController', WebsocketController) 
 
WebsocketController.$inject = ['$scope', 'websocketFactory'] 
 

 
function WebsocketController($scope, websocketFactory) { 
 

 
    var wsvm = this 
 

 
    wsvm.prices = websocketFactory.prices 
 
    
 
    websocketFactory.gdax() 
 

 
}

正しくリアルタイムデータ用のコントローラに工場をバインドする方法

ビュー

<div ng-controller="PortfolioController as vm"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <h2 style="text-align: center;">Account Balances</h2> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <table class="table"> 
 
     <thead> 
 
      <tr> 
 
      <td>24h Change</td> 
 
      <td>Total Val USD</td> 
 
      <td>BTC Price</td> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td ng-class="{change_loss: vm.totals.change_24h_usd < 0, change_win: vm.totals.change_24h_usd > 0}"><b>{{vm.totals.change_24h_usd | currency}}</b></td> 
 
      <td><b>{{vm.totals.total_usd | currency}}</b></td> 
 
      <td ng-controller="WebsocketController as wsvm">{{wsvm.prices.btc}}</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div>

？

Answer 1

ソケットリスナーのスコープを変更することは、角度コンテキスト外です。それはビュー

次のことを試してみてください更新するダイジェストを実行するように通知されるように、角度ニーズに起こるたび：

app.factory('websocketFactory', ['$http', '$rootScope', function($http, $rootScope) { 
    ...... 

    socket.addEventListener('message', function(event) { 
     var dataObj = JSON.parse(event.data) 
     if (dataObj.price) { 
     console.log(dataObj.price) //logging real time data 

     $rootScope.$apply(function(){ 
      service.prices.btc = dataObj.price //this should be updating the view 
     }); 
     } 
    }); 
}); 

を、私はまた、あなたがあなたのためにこれのすべての世話をする、角ソケットモジュールを探し示唆します内部で