javascript - AngularJs数据绑定(bind)问题来捕获和显示状态

Question

我正在尝试使用 AngularJs 获取并显示 Total Sent、Total Success 和 Total Error。到目前为止，我已经能够检索代码中的“Total Sent”、“Total Success”和“Total Error”信息。但是，我不相信我用来绑定(bind)和显示这些状态的方法(使用全局变量)是正确的。

这是我的 Controller 和相关服务。

 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