8

从服务器推送 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
}
4

3 回答 3

11

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

}]);
于 2013-02-05T09:01:24.300 回答
2

就像下面那样做

 socket.onmessage = function (event) {
     scope.$apply(function(){
       // modify scope values here 
     }
    };
于 2013-02-05T08:37:49.547 回答
1

好吧，标记的答案肯定不是OP所要求的“简单方法”。这是一个更简单的解决方案。

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

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

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

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

这是一个JSFiddle。

于 2013-10-24T16:25:47.917 回答