Angularjs模型在服务器推送websocket数据后发生了变化

Angularjs model changes after websocket data push from server

本文关键字：数据 发生了 变化 websocket 模型 服务器 Angularjs      更新时间：2023-09-26

在服务器推送websocket后，我试图更改角度模型。每次服务器提供新数据时，如何更改$scope.contacts等值。。？

我不确定使用$apply是否可行。我知道我可以访问DOM元素，检索范围，然后更改值，但应该有更好的解决方案！

我对一种从外部更新角度模型而不创建角度模块的解决方案非常感兴趣，因为我使用的是发出变化事件的相对数据源。有没有一种简单的方法可以做到这一点，比如在Backbone.js中，你可以说：

var book = new Backbone.Model({ title: 'value' });
book.set("title", "A Scandal in Bohemia");

我想要angularjs的东西是：

function MyController($scope) {
    $scope.contacts = [];
}
datasource changed -> function () {
    MyController.set('contacts', 'value'); // change angular scope property
}

查看socket.io角服务：

angular.module('app')
  .factory('socket', ['$rootScope', function ($rootScope) {
    var socket = io.connect();
    return {
      on: function (eventName, callback) {
        socket.on(eventName, function () {  
          var args = arguments;
          $rootScope.$apply(function () {
            callback.apply(socket, args);
          });
        });
      },
      emit: function (eventName, data, callback) {
        socket.emit(eventName, data, function () {
          var args = arguments;
          $rootScope.$apply(function () {
            if (callback) {
              callback.apply(socket, args);
            }
          });
        })
      }
    };
  }]);

以及使用它的控制器：

angular.module('app')
  .controller('Controller', ['$scope', 'socket', function ($scope, socket) {
    socket.emit('register')
    socket.on('register', function (data) {
        $scope.data = data;
    });
}]);

就像下面一样

 socket.onmessage = function (event) {
     scope.$apply(function(){
       // modify scope values here 
     }
    };

好吧，标记的答案肯定不是OP要求的"简单方法"。这里有一个简单得多的解决方案。

在您自己的JavaScript代码中检索任意范围：

var scope = angular.element($("#elementID")).scope();

更改Angular $scope变量中的值，但从外部JavaScript:

scope.$apply(function() {
    scope.yourArrayForExample.push({name: 'New, external value'});
});

这是一个JSFiddle。

相关文章：