angularJs數據綁定問題捕獲和顯示狀態

Question

我想要使用AngularJs獲取並顯示Total Sent，Total Success和Total Error。到目前爲止，我已經能夠在代碼中檢索Total Sent，Total Success和Total Error信息。但是，我不相信我用來綁定和顯示這些狀態的方法（使用全局變量）是正確的。

這是我的控制器和相關服務。

var sent = 0; 
var succ = 0; 
var err = 0; 

myApp.service('ParseMessageService', function() { 
    this.myFunc = function(message) { 

    var res = message.match(/Success/g); 

    if (res !== null) { 
     //console.log(res); 
     TSent = message.match(/Total Sent: (\d+)/); 
     if (TSent) { 
     sent = TSent[1]; 
     //parsedMsg.push(TSent[1]); 
     //console.log(TSent[1]); //replace with $scope and display on Gui 
     } 
     TSucc = message.match(/Total Success: (\d+)/); 
     if (TSucc) { 
     succ = TSucc[1]; 
     //parsedMsg.push(TSucc[1]); 
     // console.log(TSucc[1]); //replace with $scope and display on Gui 
     } 
     TErr = message.match(/Total Errors: (\d+)/); 
     if (TErr) { 
     err = TErr[1]; 
     //parsedMsg.push(TErr[1]); 
     //console.log(TErr[1]); //replace with $scope and display on Gui 
     } 

    } 
    } 


    //} 
}); 

myApp.factory('WebSocketService', function() { 
    var service = {}; 

    service.connect = function() { 
    if (service.ws) { 
     return; 
    } 

    var ws = new WebSocket("ws://127.0.0.1:8000"); 
    ws.onopen = function() { 
     service.callback("Succeeded to open a connection"); 
     //display webSocket connected status 
    }; 

    ws.onerror = function() { 
     service.callback("Failed to open a connection"); 
    } 

    ws.onmessage = function(message) { 
     service.callback(message.data); 
    }; 

    service.ws = ws; 
    } 

    service.send = function(message) { 
    service.ws.send(message); 
    } 

    service.subscribe = function(callback) { 
    service.callback = callback; 
    } 

    return service; 
}); 

angular.module('myApp') 
    .controller('PingTestController', function($scope, WebSocketService, ParseMessageService) { 

    $scope.messages = []; 
    $scope.TSent = []; 
    $scope.TSucc = []; 
    $scope.TErr = []; 

    $scope.parsedSent = 0; 
    $scope.parsedSucc =0; 
    $scope.parsedErr =0; 
    $scope.pingStr = "Ping" 
    $scope.define = "Definitions"; 
    $scope.url = "www.google.com" 
    $scope.size = "1"; 
    $scope.TTL = "10" 
    $scope.pause = "3"; 
    $scope.paraStr = "[,]"; 
    $scope.cmdStartStr = "[;]"; 
    ($scope.trueStr) = "TRUE"; 
    ($scope.falseStr) = "FALSE"; 
    ($scope.PfalseStr) = "False"; 
    ($scope.cmdEndStr) = "[/]"; 
    //($scope.newLineStr) = "\r\n"; 
    ($scope.startCmd) = "Start"; 
    ($scope.stopCmd) = "Stop"; 
    ($scope.clearCmd) = "Clear"; 

    $scope.updatePing = function() { 

     $scope.pingCmd = ($scope.cmdStartStr) + ($scope.pingStr) + 
     ($scope.cmdStartStr) + ($scope.define) + ($scope.cmdStartStr) + 
     ($scope.url) + ($scope.paraStr) + ($scope.PfalseStr) + ($scope.paraStr) + 
     ($scope.TTL) + ($scope.paraStr) + 
     ($scope.size) + ($scope.paraStr) + 
     ($scope.pause) + ($scope.cmdEndStr); 

    } 

    WebSocketService.subscribe(function(message) { 
     ParseMessageService.myFunc(message); 
     $scope.parsedSent = (sent); 
     $scope.parsedSucc = (succ); 
     $scope.parsedErr= (err); 
     $scope.messages.push(message); 
     $scope.$apply(); 
    }); 

    $scope.connect = function() { 
     WebSocketService.connect(); 
     } 
     $scope.send = function() { 
     WebSocketService.send($scope.pingCmd); 
     $scope.text = ""; 
    } 

    //[;]Ping[;]Stop[;]TRUE[/] 
    $scope.stopPing = function() { 
     $scope.pingStop = ($scope.cmdStartStr) + ($scope.pingStr) + 
      ($scope.cmdStartStr) + ($scope.stopCmd) + ($scope.cmdStartStr) + 
      ($scope.trueStr) + ($scope.cmdEndStr); 
     WebSocketService.send($scope.pingStop); 

     } 
     // [;]Ping[;]Start[;]TRUE[/] 
    $scope.startPing = function() { 
     $scope.pingStart = ($scope.cmdStartStr) + ($scope.pingStr) + 
     ($scope.cmdStartStr) + ($scope.startCmd) + ($scope.cmdStartStr) + 
     ($scope.trueStr) + ($scope.cmdEndStr); 
     WebSocketService.send($scope.pingStart); 

    } 

    // [;]Ping[;]Clear;]TRUE[/] 
    $scope.clearPing = function() { 
     $scope.pingClear = ($scope.cmdStartStr) + ($scope.pingStr) + 
     ($scope.cmdStartStr) + ($scope.clearCmd) + ($scope.cmdStartStr) + 
     ($scope.trueStr) + ($scope.cmdEndStr); 
     WebSocketService.send($scope.pingClear); 

    } 
    }); 

這裏是html代碼的相關部分。

<br/> 

<button ng-click="send()" class="btn"> Add new Ping</button> 
<button ng-click="startPing()" class="btn"> StartPing</button> 
<button ng-click="stopPing()" class="btn">Stop Ping</button> 
<button ng-click="clearPing()" class="btn">Clear Ping</button> 
<br /> 


<div ng-repeat = "message in messages track by $index"> 
    {{parsedSent}} {{parsedSucc}} {{parsedErr}} 
</div> 

最後，我想有一個乾淨的方式來獲得這些統計數據和網頁即與綠色背景，紅色和總總誤差帶藍色背景發送成功總有顯示。

Answer 1

您可以將全局變量移動到服務中，並從那裏使用它們。你也可以使用這個答案：Static javascript variable to be used as counter in Angularjs controller