AngularJS + Socket.IO - 如何更新模型？

Question

所以我有這個基本的CRUD Todo應用程序，我用AngularJS制作。 然后我想我想用一些Socket.IO來加強它，使它成為一個實時的網絡應用程序。 但是，我遇到了一些讓它正常工作的問題。

設置：Yeoman（bower + grunt）AngularJS RequireJS NodeJS + MongoDB Socket.IO

我的'grunt服務器'在localhost：9000上運行，而我的NodeJS / MongoDB / Socket.IO服務器在localhost上運行：4711

目前Socket.IO的作用是創建和刪除待辦事項，但我似乎無法弄清楚如何更新我的待辦事項。 我覺得這很容易。

這是codez。

Socket.js：

var io = require('socket.io');

exports.initialize = function(server) {
  io = io.listen(server);
  io.sockets.on('connection', function(socket) {
    socket.on('message', function(message) {
      message = JSON.parse(message);
      socket.get('deletedTodo', function(err, nickname) {
        socket.broadcast.send(JSON.stringify(message));
        socket.send(JSON.stringify(message));
      });
    });
    socket.on('delete_todo', function(data) {
      socket.set('deletedTodo', data.title, function() {
        socket.emit('todo_delete', data);

        socket.broadcast.emit('todoDeleted', data);
      });
    });
    socket.on('update_todo', function(data) {
      socket.broadcast.emit('todoUpdated', data);
    })
  });
}

這是我的客戶端codez。

Services.js：

/*global define*/
define(['angular'], function(angular) {
 'use strict';

 return angular.module('services', [])
   .factory('Todo', function($resource) {
     //var baseUrl = 'http://designit-todo.eu01.aws.af.cm/api/todos/:id';
     var baseUrl = 'http://localhost:port/api/todos/:id';
     return $resource(baseUrl,
       {port: ':4711', id: '@_id'}, {
       'update': {method:'PUT'},
       'delete': {method:'DELETE', isArray: true}
     });
   })
   .factory('socket', function($rootScope) {
     var socket = io.connect('http://localhost:4711');
     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);
             }
           });
         });
       },
       send: function(eventName, data, callback) {
         socket.send(eventName, data, function() {
           var args = arguments;
           $rootScope.$apply(function() {
             if (callback) {
               callback.apply(socket, args);
             }
           });
         });
       }
     }
   });
});

Controllers.js：

/*global define*/
define(['angular', 'services/services'], function(angular) {
'use strict';

return angular.module('controllers', ['services'])
.controller('Todos', ['$scope', '$resource', 'Todo', '$location', 'socket',        function($scope, $resource, Todo, $location, socket) {
  // Grab all todos.
  $scope.todos = Todo.query();

  socket.on('message', function(data) {
    // Grab all todos when new added via socket.
    $scope.todos = Todo.query();

    $scope.todos.push(data);
  });

  // Complete/update todo.
  $scope.todoCompleted = function(todo) {
    todo.$update();
    socket.emit('update_todo', todo);
  }
  socket.on('todoUpdated', function(todo) {
    // Update on all connected clients.
    console.log(todo);
  });

  $scope.removeTodo = function(todo) {
    var index = $scope.todos.indexOf(todo);
    socket.emit("delete_todo", JSON.stringify(index));
    $scope.todos.splice(index, 1);
    todo.$remove();
  }
  socket.on('todoDeleted', function(index) {
    $scope.todos.splice(index, 1);
  });
}])
.controller('Single', ['$scope', '$resource', '$routeParams', 'Todo', '$timeout', '$location', function($scope, $resource, $routeParams, Todo, $timeout, $location) {
  // Grab just a single todo
  $scope.todo = Todo.get({ id: $routeParams.id });
  // Throttle the update PUT request
  var saveTimeout;
  $scope.save = function() {
    $timeout.cancel(saveTimeout);
    saveTimeout = $timeout(function() {
      // Save the todo and then update the scope
      $scope.todo.$update(function(updated_todo) {
        $scope.todo = updated_todo;
      });
    }, 1000);
  };
}])
.controller('Add', ['$scope', '$resource', 'Todo', '$location', 'socket', function($scope, $resource, Todo, $location, socket) {
  $scope.todo = new Todo({});

  $scope.save = function() {
    if ($scope.todo.title) {
      $scope.todo.$save(function(data) {
        console.log(data);
        socket.send(JSON.stringify(data));
        $location.path('/');
      });
    }
  }
}]);
});

所以我的問題在於這段代碼：

// Complete/update todo.
$scope.todoCompleted = function(todo) {
  todo.$update();
  socket.emit('update_todo', todo);
}
socket.on('todoUpdated', function(todo) {
  // Update on all connected clients.
  console.log(todo);
});

當我在console.log（todo）時，我得到了待辦事項，但我可以對其進行“todo。$ update”。 我也嘗試過類似的東西：

  socket.on('todoUpdated', function(todo) {
    var thisTodo = Todo.get({id: todo._id});
    console.log(thisTodo);
  });

但是一旦我嘗試做這個Todo。$ update（）我收到一個錯誤：

PUT http://localhost:4711/api/todos 404 (Not Found) :4711/api/todos:1

我究竟做錯了什么？ 如果我在代碼中做錯了什么，請糾正我。 我還是AngularJS和Socket.IO的新手。

Answer 1

我找到了另一個解決方案，但不確定它是否是正確的方法：

socket.on('todoUpdated', function(updated_todo) {
  for (var i in $scope.todos) {
    if ($scope.todos[i]._id == updated_todo._id) {
      $scope.todos[i] = updated_todo;
    }
  }
});

所以在Todos控制器中我有$ scope.todos，它包含所有待辦事項。 然后我循環遍歷所有這些，在id上找到匹配並將找到的待辦事項設置為新更新的待辦事項。

如果有更好的方法，請告訴我:)