如何在angularjs中设置socket.io消息事件后控制器的作用域
这是我的main.js如何在angularjs中设置socket.io消息事件后控制器的作用域,angularjs,Angularjs,这是我的main.js var app = angular.module('app', []); app.config(function ($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); // enable pushState $routeProvider.when('/', { templateUrl: '/app.html', controller: 'A
var app = angular.module('app', []);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true); // enable pushState
$routeProvider.when('/', {
templateUrl: '/app.html',
controller: 'AppCtrl'
});
$routeProvider.when('/another/route', {
templateUrl: '/deep.html',
controller: 'AppCtrl'
});
});
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
socket.on('sendCustomer', function (data) {
console.log(data);`
//here i want to set controller scope
});
app.controller('AppCtrl', function ($scope) {
$scope.model = {
message: 'This is my app!!!'
};
$scope.getCustomer = function(imageUrl) {
alert("here i have to send command to socket io ");
socket.emit('getCustomer', { });
};
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset='utf-8'>
<title>Egghead Videos</title>
<link rel='stylesheet' href='/vendor/foundation/foundation.min.css'>
</head>
<body>
<div ng-app='app'>
<ng-view></ng-view>
</div>
<script type='text/javascript' src='/vendor/angularjs/angular.js'></script>
<script type='text/javascript' src='/socket.js'></script>
<script type='text/javascript' src='/main.js'></script>
</body>
</html>
所以，当在main.js中触发客户端上的sendCustomer事件时，我想通过ng repeat显示controller中的数据，如果是，我可以这样做吗，然后如何 您应该创建这样的服务来处理Socket.IO： app.factory('socket', ['$rootScope', function ($rootScope) { var socket = io.connect(); return { on: function (eventName, callback) { function wrapper() { var args = arguments; $rootScope.$apply(function () { callback.apply(socket, args); }); } socket.on(eventName, wrapper); return function () { socket.removeListener(eventName, wrapper); }; }, emit: function (eventName, data, callback) { socket.emit(eventName, data, function () { var args = arguments; $rootScope.$apply(function () { if(callback) { callback.apply(socket, args); } }); }); } }; }]); app.factory（'socket'，['$rootScope'，function（$rootScope）{ var socket=io.connect（）； 返回{ on:函数（eventName，回调）{ 函数包装器（）{ var args=参数； $rootScope.$apply（函数（）{ callback.apply（套接字，args）； }); } socket.on（eventName，wrapper）； 返回函数（）{ removeListener（eventName，包装器）； }; }, emit：函数（eventName、数据、回调）{ emit（事件名、数据、函数（）{ var args=参数； $rootScope.$apply（函数（）{ 如果（回调）{ callback.apply（套接字，args）； } }); }); } }; }]); 然后您可以在控制器中使用它： app.controller('AppCtrl', ['$scope', 'socket', function ($scope, socket) { socket.on('sendCustomer', function (data) { $scope.customers.push(data); }); $scope.model = { message: 'This is my app!!!' }; $scope.customers = []; $scope.getCustomer = function(imageUrl) { alert("here i have to send command to socket io "); socket.emit('getCustomer', { }); }; }); app.controller（'AppCtrl'，['$scope'，'socket'，函数（$scope，socket）{ socket.on（'sendCustomer'，函数（数据）{ $scope.customers.push（数据）； }); $scope.model={ 信息：“这是我的应用！！！” }; $scope.customers=[]； $scope.getCustomer=函数（imageUrl）{ 警报（“这里我必须向套接字io发送命令”）； emit（'getCustomer'，{}）； }; }); 最后在app.html中：
<div ng-repeat="customer in customers">{{customer}}</div>
{{customer}
顺便说一句，您可以使用REST API轻松地完成同样的任务，但我猜您应该尝试Socket.IO。您应该创建这样的服务来处理Socket.IO： app.factory('socket', ['$rootScope', function ($rootScope) { var socket = io.connect(); return { on: function (eventName, callback) { function wrapper() { var args = arguments; $rootScope.$apply(function () { callback.apply(socket, args); }); } socket.on(eventName, wrapper); return function () { socket.removeListener(eventName, wrapper); }; }, emit: function (eventName, data, callback) { socket.emit(eventName, data, function () { var args = arguments; $rootScope.$apply(function () { if(callback) { callback.apply(socket, args); } }); }); } }; }]); app.factory（'socket'，['$rootScope'，function（$rootScope）{ var socket=io.connect（）； 返回{ on:函数（eventName，回调）{ 函数包装器（）{ var args=参数； $rootScope.$apply（函数（）{ callback.apply（套接字，args）； }); } socket.on（eventName，wrapper）； 返回函数（）{ removeListener（eventName，包装器）； }; }, emit：函数（eventName、数据、回调）{ emit（事件名、数据、函数（）{ var args=参数； $rootScope.$apply（函数（）{ 如果（回调）{ callback.apply（套接字，args）； } }); }); } }; }]); 然后您可以在控制器中使用它： app.controller('AppCtrl', ['$scope', 'socket', function ($scope, socket) { socket.on('sendCustomer', function (data) { $scope.customers.push(data); }); $scope.model = { message: 'This is my app!!!' }; $scope.customers = []; $scope.getCustomer = function(imageUrl) { alert("here i have to send command to socket io "); socket.emit('getCustomer', { }); }; }); app.controller（'AppCtrl'，['$scope'，'socket'，函数（$scope，socket）{ socket.on（'sendCustomer'，函数（数据）{ $scope.customers.push（数据）； }); $scope.model={ 信息：“这是我的应用！！！” }; $scope.customers=[]； $scope.getCustomer=函数（imageUrl）{ 警报（“这里我必须向套接字io发送命令”）； emit（'getCustomer'，{}）； }; }); 最后在app.html中：
<div ng-repeat="customer in customers">{{customer}}</div>
{{customer}
顺便说一句，您可以使用RESTAPI轻松地完成同样的任务，但我猜您应该尝试Socket.IO。首先，如果您要在模块中使用任何东西，您必须将其传入
app.controller('AppCtr', ['$scope', 'socket', function($scope, socket) { ...
app.controller('AppCtr', ['$scope', 'socket', function($scope, socket) { ...