/
scope-chat.html
109 lines (109 loc) · 3.59 KB
/
scope-chat.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html ng-app="chatApp">
<head>
<meta charset="UTF-8">
<title>채팅창 클라이언트 Scope 이벤트 처리 예제</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.chat {
margin: 0;
padding: 0;
list-style: none;
}
.chat li {
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #999;
}
.chat li.left .chat-body {
margin-left: 60px;
}
.chat li.right .chat-body {
margin-right: 60px;
}
.container{
margin-top: 40px;
}
</style>
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
<script>
angular.module('chatApp', []).
factory('UserService', function () {
return {
getUser : function () {
return {
name : '제이'
}
}
}
}).
factory('ChatService', function ($rootScope) {
var CHAT_EVENT_MSG = "chat_masg",
sendChatMsg = function (msg) {
$rootScope.$broadcast(CHAT_EVENT_MSG, msg);
},
onChatMsg = function ($scope, handler) {
$scope.$on(CHAT_EVENT_MSG, function (event, msg) {
handler(msg);
});
};
return {
sendChatMsg: sendChatMsg,
onChatMsg: onChatMsg
};
})
.controller('chatInputCtrl', ['$scope','ChatService','UserService', function ($scope,ChatService,UserService) {
$scope.sendMsg = function (msg) {
ChatService.sendChatMsg({
msg : msg,
user :UserService.getUser()
});
$scope.chatTxt = "";
};
}])
.controller('chatBodyCtrl', ['$scope','ChatService', function ($scope,ChatService) {
$scope.chats = [];
ChatService.onChatMsg($scope, function (msg) {
$scope.chats.push(msg);
});
}]);
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="chat-panel panel panel-default">
<div class="panel-heading">
<i class="fa fa-comments fa-fw"></i>
채팅예제
</div>
<div class="panel-body" ng-controller="chatBodyCtrl">
<ul class="chat">
<li class="{{$even && 'left' || 'right'}} clearfix" ng-repeat="chat in chats">
<span class="chat-img pull-{{$even && 'left' || 'right'}}">
<img src="http://placehold.it/50/55C1E7/fff" alt="사용자 이미지" class="img-circle">
</span>
<div class="chat-body clearfix">
<div class="header text-{{$even && 'left' || 'right'}}">
<strong>{{chat.user.name}}</strong>
</div>
<p>{{chat.msg}}</p>
</div>
</li>
</ul>
</div>
<div class="panel-footer" ng-controller="chatInputCtrl">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm" ng-model="chatTxt">
<span class="input-group-btn">
<button class="btn btn-warning btn-sm" id="btn-chat" ng-click="sendMsg(chatTxt)">전송</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>