javascript - 从服务器推送 websocket 数据后 Angularjs 模型发生变化

Question

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

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

我对无需创建 Angular 模块即可从外部更新 Angular 模型的解决方案非常感兴趣，因为我使用的是发出更改事件的相关数据源。有没有像在 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
}

Answer 1

查看 socket.io Angular 服务:

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);
            }
          });
        })
      }
    };

  }]);

和使用它的 Controller :

angular.module('app')
  .controller('Controller', ['$scope', 'socket', function ($scope, socket) {

    socket.emit('register')

    socket.on('register', function (data) {
        $scope.data = data;
    });

}]);