我正在尝试构建一个具有角度 socket.io 和nodejs的Web应用程序。 当特定模板加载到 ng-view 上时,是否可以在每个 TYM 连接到服务器套接字? 我以多种方式尝试过。 它仅在第一次有效。 当我加载另一个视图并返回到旧视图时,我必须刷新页面, 否则它不起作用!提前谢谢你!服务器端代码:
io.on("connection", function(socket){
Events.find().exec(function(err,existing_events){
if(err)
{
console.log(err);
socket.emit('err',{message: "events can not be loaded now!"})
}
else
{
socket.emit('events',{events: existing_events});
}
});
}
这是客户端代码:角度配置:
window.app.config(['$routeProvider', '$locationProvider',
function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider.
when('/event', {
templateUrl: '/views/eventsHome.html'
}).
when('/', {
templateUrl: 'views/index.html'
}).
otherwise({
redirectTo: '/'
});
}
]);
活动首页.html:
<div ng-controller="eventsCtrl">
<label style="width:15%;float:left;">Current Events</label>
<a style="float:left;" href="" id="create" ng-click="create()">Create Event</a>
<div style="border:none; width:90%; max-height:200px; overflow:auto;overflow-x:hidden; clear:both; padding-left:2%; margin-top:5%;">
<div id='events' ng-repeat="event in events">
<a href="/event/{{event.name}}" ng-click="leave()">{{event.name}}</a>
</div>
</div>
</div>
eventsCtrl:
angular.module('myApp.system').controller('eventsCtrl', ['$scope', 'Global','$location', function ($scope, Global,$location) {
var socket;
var sessionId = '';
var serverBaseUrl = document.domain;
socket = io.connect(serverBaseUrl);
$scope.events;
socket.on('connect', function () {
sessionId = socket.socket.sessionid;
console.log('Connected ' + sessionId);
//socket.emit('newUser', {id: sessionId, name: user_name});
});
socket.on('events',function(data){
//updateEvents(data.events);
$scope.$apply(function () {
// body...
$scope.events=data.events;
});
});
}]);
你想做的事的最简单方法(假设我理解正确),是使用 $route
服务来侦听视图更改。 所有可用$routeChange
事件的文档都可以在 Angular 文档中找到。 下面是如何侦听路由更改的示例:
在'eventsCtrl'
控制器中:
.controller('eventsCtrl', ['$scope','$rootScope', ... // and other dependencies
function($scope, $rootScope, ...){
...
$rootScope.$on('$routeChangeSuccess', function(e, currRoute, prevRoute){
switch(currRoute){
// test for which specific routes you want to check for
// such as connecting to or destroying your various sockets
}
});
...
}
]);
每次路由更改时,这将通知$rootScope
,并告诉您它被更改为哪个路由。 希望这能做到你想要的。