Angularjs + socket + 无法将数据传递到控制器

Question

我是这个插座的新手。我使用后端节点 js 和前端 angularjs。

我的数据正在打印，但无法将该数据输入控制器。

server.js：

var server = app.listen(port);
var io = require('socket.io').listen(server);
io.on('connection', function(socket) {
    setInterval(function() {
        socket.emit('addCustomer', {
            time : new Date() + "8989"
        });
    }, 1000);
});

service.js：

var app = angular.module('myApp');

app.factory('socket', ['$rootScope',
function($rootScope) {
    var socket = io.connect('http://localhost:9090');

    return {
        // replace with the code below
        on : function() {//on: function(addCustomer){
            socket.on("addCustomer", function(customer) {
                console.log("Socket Factory - customer added", customer);
                return customer;
            });
        },
        emit : function(addCustomer, data) {
            console.log("rk");
            console.log(data);
            socket.emit(addCustomer, data);
        }
    };
}]); 

controller.js：

var app = angular.module('myApp');

app.controller('CustomerCtrl', function($scope, socket) {

    socket.on('addCustomer', function(data) {
        console.log(data);
        console.log("--")
        $scope.time = data.time;
    });

}) 

在工厂文件的控制台中输出打印。但我无法将该数据传递给控制器​​。请任何人帮助解决这个问题。

控制台输出：

Socket Factory - customer added Object {time: "Thu Sep 29 2016 16:52:44 GMT+0530 (IST)8989"}
socketService.js:11 Socket Factory - customer added Object {time: "Thu Sep 29 2016 16:52:45 GMT+0530 (IST)8989"}
socketService.js:11 Socket Factory - customer added Object {time: "Thu Sep 29 2016 16:52:46 GMT+0530 (IST)8989"}

Answer 1

您是否正确地从您的视图中调用您的控制器。您可以在这里查看更多信息AngularJS. How to call controller function from outside of controller component

您能否复制您的视图文件以便我们查看。

另外，如果没有成功，我会尝试显式加载监听器，类似这样。

var app = angular.module('myApp');

app.controller('CustomerCtrl', function($scope, socket) {

    $scope.loadListener = function() {
        Console.log("Loading listener for event addCustomer")    
        socket.on('addCustomer', function(data) {
            console.log(data);
            console.log("--")
            $scope.time = data.time;
        });
    }

   $scope.testAlert = function() { alert("Method bound to controller") }
})

并通过 ng-click 将 loadListener 方法显式绑定到按钮，以检查您的控制器是否实际绑定正确。

还有另一种通过 ng-init 的方法。你可以看看这个线程。 How to execute angular controller function on page load?

使用 ng-init 你可能会这样做

<div data-ng-controller="CustomerCtrl" data-ng-init="loadListener()"></div>

只是为了确定你的控制器是否正确绑定

Answer 2

当您在角度生命周期之外更改数据时（在非角度异步函数中），您应该运行角度摘要

socket.on('addCustomer', function(data) {
        console.log(data);
        console.log("--")
        $scope.time = data.time;
        $scope.$apply(); //this call actiually should be placed in your service
});

编辑：

啊，对不起，您只是不为您的服务提供参数。更改相应的服务方法：

函数（$rootScope）{ var socket = io.connect('http://localhost:9090');

return {
    // replace with the code below
    on : function(type, cb) {//on: function(addCustomer){
        socket.on(type, cb);
    }
};