angular 无法在 index.html 中实现,请大家帮忙看看吧,谢谢了。。。
发布于 7 年前 作者 wangxuq 6457 次浏览 最后一次编辑是 5 年前 来自 问答

现在情况是 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 });
6 回复

Markdown 标记错了 techNode 名字好眼熟啊

呵呵,之前标记过,现在给忘了,那个很想知道这个问题的答案,所以没有继续查标记法。这个是我在一本书中看的,想自己实现一下 可以帮忙看一下问题吗?谢谢了。。。

@jiyinyiyong 我记得就是这样标记的啊<pre><code>content</code></pre>,怎么不行了呢???

找到错误了,是因为在使用angular相关控制器的js文件里面有错误,所以,angular的服务没有被使用到。只要保证这些使用 angularjs的js的文件全部正确,才可以使用angularjs。学习了一课。。。

@wangxuq 如果是这样的话,在页面的console下应该可以看到错误的呀

@wangxuq 这个不是 Markdown 的语法, HTML 语法可能有安全隐患, 经常会被过滤掉的

回到顶部