现在情况是 index.html 中的 ctrlEnterBreakLine 命令不工作，甚至 angular.js 都不工作，不知道为什么，请大家帮忙看看吧。谢谢了。。。下面是 index.html, technode.js, ctrl-enter-break-line.js
index.html
1 <!doctype html>
2 <html lang="zh-CN" ng-app="techNodeApp">
3 <head>
4 <meta charset="UTF-8">
5 <title>chat</title>
6 <link rel="stylesheet" href="/style/room.css">
7 <link rel="stylesheet" href="/style/bootstrap/dist/css/bootstrap.css">
8
9 <script type="text/javascript" src="/socket.io/socket.io.js"></script>
10 <script type="text/javascript" src="/style/jquery/dist/jquery.js"></script>
11 <script type="text/javascript" src="/style/bootstrap/dist/js/bootstrap.js"></script>
12 <script type="text/javascript" src="/style/angular/angular.js"></script>
13
14 <script type="text/javascript" src="/technode.js"></script>
15 <script type="text/javascript" src="/directive/auto-scroll-to-bottom.js"></script>
16 <script type="text/javascript" src="/directive/ctrl-enter-break-line.js"></script>
17 </head>
18 <body>
19 <div ng-app="techNodeApp">
20 <div class="navbar navbar-inverse navbar-fixed-top">
21 <div class="container">
22 <div class="navbar-header">
23 <a class="navbar-brand" href="#">chat</a>
24 </div>
25 </div>
26 </div>
27 <div class="container" style="margin-top:100px;">
<div class="col-md-12">
29 <div class="panel panel-default room" ng-controller="RoomCtrl">
30 <div class="panel-heading room-header">chat</div>
31 <div class="panel-body room-content">
32 <div class="list-group messages" autoScrollToBottom>
33 <div class="list-group-item message"
34 ng-repeat="message in messages">
35 someone : {{message}}
36 </div>
37 </div>
38 <form class="message-creator" ng-controller="MessageCreatorCtrl">
39 <div class=form-group>
40 <textarea required class="form-control message-input"
41 ng-model="newMessage" ctrlEnterBreakLine="createMessage()"
42 placeholder="Ctrl+Enter to quick send"></textarea>
43 </div>
44 </form>
45 </div>
46 </div>
47 </div>
48 </div>
49 </div>
50 </body>
51 </html>
technode.js
1 angular.module('techNodeApp',[]);
2
3 //package the socket service
4 angular.module('techNodeApp').factory('socket',function($rootScope){
5 var socket = io.connect('/');
6 return {
7 on : function(eventName,callback){
8 socket.on(eventName,function(){
9 var args = arguments;
10 $rootScope.$apply(function(){
11 callback.apply(socket,args);
12 })
13 })
14 },
15 emit : function(eventName,data,callback){
16 socket.emit(eventName,data,function(
17 var args= arguments;
18 $rootScope.$apply(function(){
19 if(callback){
20 callback.apply(socket,args);
21 }
22 })
23 ));
24 }
25 }
26 });
27
//define RoomCtrl
29 angular.module('techNodeApp').controller('RoomCtrl',function($scope,socket){
30 $scope.messages = [];
31 socket.emit('getAllMessages');
32 socket.on('allMessage',function(messages){
33 $scope.messages = messages;
34 })
35 socket.on('messageAdded',function(message){
36 $scope.messages.push(message);
37 });
38 })
39
40 //define MessageCreatorCtrl
41 angular.module('techNodeApp').controller('MessageCreatorCtrl',function($scope,socket){
42 $scope.newMessage ='';
43 $scope.createMessage = function(){
44 if($scope.newMessage == ''){
45 return ;
46 }
47 socket.emit('createMessage',$scope.newMessage);
48 $scope.newMessage = '';
49 }
50 );
ctrl-enter-break-line.js如下：
1 angular.module('techNodeApp').directive('ctrlEnterBreakLine',function(){
2 return function($scope,$element,$attrs){
3 var ctrlDown = false;
4 element.bind('keydown',function(evt){
5 if(evt.which === 17){
6 ctrlDown = true;
7 setTimeout(function(){
8 ctrlDown = false;
9 },1000);
10 }
11 if(evt.which === 13){
12 if(ctrlDown){
13 $element.val($element.val() + '\n')
14 }else{
15 $scope.$apply(function(){
16 $scope.$eval($attrs.ctrlEnterBreakLine);
17 });
18 evt.preventDefault();
19 }
20 }
21 });
22 };
23 });
