//接收到欢迎新用户消息，显示系统欢迎辞，刷新在线列表
socket.on('userAdded', function(data) {});
//接收到所有用户信息，初始化在线列表
socket.on('allUser', function(data) {});
//接收到用户退出消息，刷新在线列表
socket.on('userRemoved', function(data) {});
//接收到新消息，添加到聊天记录
socket.on('messageAdded', function(data) {});
接收到事件以后，做相应的刷新动作，这里的socket是socket.io经过包装的服务，内部仅包装了我们需要用到的两个函数on和emit。我们在事件监听里对model做的修改，都会在AngularJS内部得到通知和处理，UI才会得到及时刷新。
监听内做的事情太具体和琐碎了，这里就不列出了，接下来介绍一下message指令。
message 指令
最后分享一下我在写message指令时遇到的问题。首先看一下其代码：
app.directive('message', ['$timeout',function($timeout) { return { restrict: 'E', templateUrl: 'message.html', scope:{ info:"=", self:"=", scrolltothis:"&" }, link:function(scope, elem, attrs){ $timeout(scope.scrolltothis); } }; }])
以及其模板message.html:
<div ng-switch on="info.type"> <!-- 欢迎消息 --> <div ng-switch-when="welcome">系统{{info.text}}来啦,大家不要放过他~</div> <!-- 退出消息 --> <div ng-switch-when="bye">系统:byebye,{{info.text}}</div> <!-- 普通消息 --> <div ng-switch-when="normal" ng-class="{others:self!==info.from,self:self===info.from}"> <div>{{info.from}} @ {{time | date: 'HH:mm:ss' }}</div> <div>{{info.text}}<span></span></div> </div> </div>
模板中我们用ng-switch指令监听info.type变量的值，根据其值的不同显示不同内容。比如，当info.type值为"welcome"时，创建第一个dom节点，删除下方另外两个div。
另外，普通消息下，为了在UI上区分自己发出去的和收到的消息，需要给他们应用不同的样式，这里用ng-class指令实现。
复制代码 代码如下:
ng-class="{others:self!==info.from,self:self===info.from}"
当'self===info.from'返回true时，应用'self'类，否则，应用'others'类。
在此指令中，我们创建了独立作用域，并绑定了三个属性，绑定完后还必须在父作用域的HTML标签上添加相应属性。
scope:{ info:"=", self:"=", scrolltothis:"&" } <message self="nickname" scrolltothis="scrollToBottom()" info="message" ng-repeat="message in messages"></message>
在link函数中，执行一个动作：每当一个message被加到页面上时，将聊天记录滚动到最下方，一开始我是这样写的：
复制代码 代码如下:
link:function(scope, elem, attrs){ scope.scrolltothis();}
结果发生了一个很奇怪的现象，总是滚动到上一条位置，而不是最新这条。调试之后发现是因为'scrolltothis'函数执行的时候，DOM还没渲染，所以在函数内部获取scrollHeight的时候获得的总是添加DOM节点之前的状态。这时候，可以把代码放到$timeout里延迟0秒执行，延迟0秒并不意味着会立即执行，因为js的单线程特性，代码实际会等到dom渲染完再执行。
复制代码 代码如下:
$timeout(scope.scrolltothis);
完整代码可以戳我的GitHub→ChatRoom-AngularJS，DEMO可以戳→chat room
有任何不妥之处或错误欢迎各位指出，不胜感激~
您可能感兴趣的文章: