如何在加載特定的ng-view時連接到套接字的每個tym？並在卸載時銷燬？

我試圖用angular socket.io和nodejs構建一個web應用程序。是否有可能連接到服務器套接字每個tym當一個特定的模板加載到ng-view？我嘗試了幾種方式。它只有第一次運作。當我加載另一個視圖並且回到舊的視圖時，我必須刷新頁面，否則它不起作用！提前謝謝你！服務器端代碼：如何在加載特定的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: '/' 
     }); 
    } 
]);

eventsHome.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; 
     }); 

     }); 

}]);

來源

2013-10-15 biborno

我認爲最簡單的方法就是使用$route服務來收聽視圖更改。所有可用$routeChange事件的文檔可在Angular Docs中找到。這裏有一個如何爲路由變化聽一個例子：

在你'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路線的變化，並告訴你哪條路線又改爲。希望這是你想要的。

來源

2013-10-15 14:46:09 tennisgent

如何在加載特定的ng-view時連接到套接字的每個tym？並在卸載時銷燬？

回答

相關問題