WebSocket的数据后，Angularjs模型的变化从服务器推 [英] Angularjs model changes after websocket data push from server

问题描述

我试图从服务器的WebSocket推后更改我的角度模式。这怎么可能改变像值 $ scope.contacts 每个服务器提供新数据时..？

我不知道是否有可能通过使用 $适用。我知道，我可以访问DOM元素检索范围，然后改变其价值，但应该有一个更好的解决方案！

我在一个解决方案，以更新从外部的角度模型，而不会因为我使用的发出更改事件相关的数据源创建角模块很感兴趣。有没有简单的方法来做到这一点像Backbone.js的，你可以说：

  VAR书=新Backbone.Model（{标题：'值'}）;
book.set（称号，波希米亚丑闻）;
 

我想在angularjs是一样的东西：

 函数myController的（$范围）{
    $ scope.contacts = [];
}数据源改变 - ＆GT;功能（）{
    MyController.set（'联系人'，'值'）; //改变角度scope属性
}
 

解决方案

看socket.io角服务：

angular.module（应用）
  .factory（'插座'，['$ rootScope'，函数（$ rootScope）{    变种插座= io.connect（）;    返回{
      于：功能（eventName的，回调）{
        socket.on（eventName的，函数（）{
          变参=参数;
          $ rootScope。$应用（函数（）{
            callback.apply（插座，参数）;
          }）;
        }）;
      }，
      发出：功能（eventName的，数据，回调）{
        socket.emit（eventName的，数据功能（）{
          变参=参数;
          $ rootScope。$应用（函数（）{
            如果（回调）{
              callback.apply（插座，参数）;
            }
          }）;
        }）
      }
    };  }]）;


和使用它的控制器：

  

angular.module（应用）
  .controller（'控制'，['$范围'，'插座'，函数（$范围，插座）{    socket.emit（注册）    socket.on（注册，功能（数据）{
        $ scope.data =数据;
    }）;}]）;


I'm trying to change my angular model after a websocket push from the server. How is it possible to change values like $scope.contacts each time the server serves new data..?

I'm not sure if it is possible by using $apply. I know that I can access the DOM element retrieve the scope and then change the values, but there should be a better solution!

I'm really interested in a solution to update the angular model from outside without creating angular modules since I'm using relative data sources that emit change events. Is there no simple way to do that like in Backbone.js where you can say:

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

What I want in angularjs is something like:

function MyController($scope) {
    $scope.contacts = [];
}

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

解决方案

Look at socket.io angular service:

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

  }]);

and controller using it:

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

    socket.emit('register')

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

}]);

这篇关于WebSocket的数据后，Angularjs模型的变化从服务器推的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！