Javascript AngularJS未使用Websocket更新数据绑定_Javascript_Angularjs

Javascript AngularJS未使用Websocket更新数据绑定

javascript angularjs

Javascript AngularJS未使用Websocket更新数据绑定,javascript,angularjs,Javascript,Angularjs,你好，我正在尝试使用AngularJS和websocket进行数据绑定。当Websocket发出响应时，数据应该显示在站点上，但它的工作方式与我想象的不同这是我的JS： function WebApp() { this.webSocket = null; this.workdata = null; var that = this; this.AngularApp = angular.module('AngularApp', []); this.AngularApp.

你好，我正在尝试使用AngularJS和websocket进行数据绑定。当Websocket发出响应时，数据应该显示在站点上，但它的工作方式与我想象的不同

这是我的JS：

 function WebApp() {
  this.webSocket = null;
  this.workdata = null;

  var that = this;


  this.AngularApp = angular.module('AngularApp', []);
  this.AngularApp.controller('AngularCtrl', function ($scope) {
     $scope.workdata = that.workdata;
  });


  this.initializeWebsocket = function() {
      this.webSocket = new WebSocket('ws://url2ws');
      this.webSocket.onmessage = function(resp) {
        that.workdata = JSON.parse( resp.data );
        $('#wait').hide();
      }

}

var app = null;

$( 'document' ).ready(function() {
    $('#wait').show();
    app = new WebApp();
    app.initializeWebsocket();
  });

这是我的HTML：

    <!doctype html>
<html class="no-js" ng-app="AngularApp">
<head>
 <script src="js/vendor/jquery.js"></script>
 <script src="js/app.js"></script>
  <script src="js/angular.min.js"></script>
</head>
<body ng-controller="AngularCtrl">
Field1 : {{workdata.field1}}<br />
Field2 : {{workdata.field2}}
</body>
</html>

该变量仅在创建控制器时填写在

$scope.workdata=that.workdata行中。随后修改.workdata

将不会更新

$scope.workdata

，因此手表

{{workdata.field1}}

仍将显示原始值

要解决此问题，请修改作用域的值，并确保在AngularJS结构之外修改作用域时调用

$scope.$apply

。WebSocket回调不由AngularJS处理，因此您必须调用

$scope.$apply

通知AngularJS重新触发其循环

此外，我强烈建议您使用AngularJS结构编写应用程序，而不是像现在这样使用AngularJS作为库。请参阅这方面的优秀答案。

变量仅在创建控制器时填写，在

$scope.workdata=that.workdata。随后修改.workdata

将不会更新

$scope.workdata

，因此手表

{{workdata.field1}}

仍将显示原始值

要解决此问题，请修改作用域的值，并确保在AngularJS结构之外修改作用域时调用

$scope.$apply

。WebSocket回调不由AngularJS处理，因此您必须调用

$scope.$apply

通知AngularJS重新触发其循环

此外，我强烈建议您使用AngularJS结构编写应用程序，而不是像现在这样使用AngularJS作为库。请参阅这方面的优秀答案。

变量仅在创建控制器时填写，在

$scope.workdata=that.workdata。随后修改.workdata

将不会更新

$scope.workdata

，因此手表

{{workdata.field1}}

仍将显示原始值

要解决此问题，请修改作用域的值，并确保在AngularJS结构之外修改作用域时调用

$scope.$apply

。WebSocket回调不由AngularJS处理，因此您必须调用

$scope.$apply

通知AngularJS重新触发其循环

此外，我强烈建议您使用AngularJS结构编写应用程序，而不是像现在这样使用AngularJS作为库。请参阅这方面的优秀答案。

变量仅在创建控制器时填写，在

$scope.workdata=that.workdata。随后修改.workdata

将不会更新

$scope.workdata

，因此手表

{{workdata.field1}}

仍将显示原始值

要解决此问题，请修改作用域的值，并确保在AngularJS结构之外修改作用域时调用

$scope.$apply

。WebSocket回调不由AngularJS处理，因此您必须调用

$scope.$apply

通知AngularJS重新触发其循环

此外，我强烈建议您使用AngularJS结构编写应用程序，而不是像现在这样使用AngularJS作为库。请参阅这方面的优秀答案。

您好，谢谢您的回复，我知道您对$scope的意思。$apply，因为scopre只是匿名函数中的一个参数。我找不到控制器或应用程序的成员。这就是我建议使用AngularJS结构的原因。您编写的WebSockets代码在AngularJS之外，因此AngularJS无法知道何时运行其更新

$scope.$apply

是一种让AngularJS知道其系统中的某些内容何时从系统外发生了更改的方法。嗯，你能给我一个如何调用$scope.$apply（）的示例吗。我尝试将$scope保存为控制器绑定函数中类的成员。在处理WebSocket数据之后，我尝试调用它。$scope.$apply（）。这不会导致错误，但不会产生任何影响。（我补充了问题）您好，谢谢您的回答，我很清楚您对$scope.$apply的意思，因为scopre只是匿名函数中的一个参数。我找不到控制器或应用程序的成员。这就是我建议使用AngularJS结构的原因。您编写的WebSockets代码在AngularJS之外，因此AngularJS无法知道何时运行其更新

$scope.$apply

$scope.$apply

   function WebApp() {
  this.webSocket = null;
  this.workdata = null;
  this.$scope = null;

  var that = this;


  this.AngularApp = angular.module('AngularApp', []);
  this.AngularApp.controller('AngularCtrl', function ($scope) {
    $scope.workdata = that.workdata; 
    that.$scope= $scope;
  });


  this.initializeWebsocket = function() {
      this.webSocket = new WebSocket('ws://url2ws');
      this.webSocket.onmessage = function(resp) {
        that.workdata = JSON.parse( resp.data );
        that.$scope.$apply();
      }

}

var app = null;

$( 'document' ).ready(function() {
    $('#wait').show();
    app = new WebApp();
    app.initializeWebsocket();
  });