2017-08-06 62 views
0

嘿,我遇到了一个奇怪的问题。我的socket.emit正在为我的一个控制器工作,但它不适用于另一个控制器。socket.emit只适用于一个控制器AngularJS

server.js(服务器端)

io.sockets.on('connection', function(socket){ 
    console.log('User ' + socket.id + ' connected'); 
    socket.emit('test'); 
}); 

QueueController.js(客户端)(工作)

app.controller('QueueController', ['$scope', '$location', '$rootScope', 'socket', 
    function($scope, $location, $rootScope, socket){ 

    socket.on('chat start', function(data){ 
     $rootScope.$apply(function(){ 
      $location.path('/chat'); 
     }); 
    }); 

    socket.on('test', function(){ 
     console.log('hello world'); //this displays fine in the console 
    }); 
}); 

ChatController(客户端) (不工作)

app.controller('ChatController', ['$scope', '$rootScope', 'socket', 
    function($scope, $rootScope, socket){ 

    socket.on('test', function(){  
     console.log('hello world'); //this does not display at all 
    }); 
}); 

我读过一个需要包装内

socket.on('connect', function(){ ... }socket.emit,但没有奏效。

这是我的路线:

app.js

var app = angular.module('ChatApp', ['ngRoute', 'ngAnimate', 'luegg.directives', 'btford.socket-io']); 

app.config(function($routeProvider, $locationProvider){ 
    $routeProvider 
    .when('/', { 
     controller:'HomeController', 
     templateUrl:'views/home.html' 
    }) 
    .when('/queue', { 
     controller:'QueueController', 
     templateUrl:'views/queue.html' 
    }) 
    .when('/chat', { 
     controller:'ChatController', 
     templateUrl:'views/chat.html' 
    }) 
    .otherwise({ 
     redirectTo: '/' 
    }); 
}); 

任何想法有什么不对?

+0

您知道根据您当前的路线只有一个控制器处于活动状态吗? – Quad

+0

我不知道。我必须做什么才能切换到新的主动控制器?可能吗? – Student22

+1

当您访问http:// yourapp/queue时,将获得您在路由配置中定义的模板和控制器。如果你去/聊天(你可以输入网址栏或在页面的某个地方放一个链接),你可以通过它的模板获得chatcontroller。如果你想要一个路由器中的附加控制器,你需要将一个带有ng-controller的元素放在你的模板中。 – Quad

回答

0

在你的情况下,它主要是一个范围问题。在您的路由配置中,每个控制器都被定义为拥有顶级作用域的控制器。而当您更改页面时,该顶级示波器控制器会一起切换。

一种解决方法是构建一个将用于所有页面的控制器,例如MasterCtrl或RootCtrl。然后,您可以将该控制器附加到body标签或html标签。然后,无论您处于哪个页面,该控制器都会触发,您可以实现多页面套接字服务。

<html ng-app='YourApp' ng-controller="MasterCtrl"> 

<body ng-app='YourApp' ng-controller="MasterCtrl"> 

然而,什么最终我建议你做的是使用组件(可从Angular.js 1.5)。把你的scoket服务放在一个组件中。无论您需要使用套接字,都可以使用它。由于默认情况下组件带有独立的作用域,因此可以实现套接字服务而不必担心范围冲突。

查看此URL以进一步了解组件。 https://toddmotto.com/exploring-the-angular-1-5-component-method/

相关问题