Refactor chat_driver.jsp

TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/chat_driver.jsp

@@ -32,16 +32,17 @@
             </ul>
         </div>
 
-        <div ng-controller="chatController as chatList">
+        <div ng-controller="ChatController as chatController">
             <div id="scrollArea">
-                <div ng-repeat="chat in chatList.chats">
+                <div ng-repeat="chat in chatController.chatList">
                     <p class="chat-bubble-left" ng-if="chat.from === 'them'">{{chat.text}}</p>
                     <p class="chat-bubble-right" ng-if="chat.from === 'me'">{{chat.text}}</p>
                 </div>
+                <div scroll-to-bottom=""></div>
             </div>
             <div class="chat-box">
-                <form class="form-chat-box" ng-submit="chatList.addChat()">
-                    <input class="text-input" ng-model="chatList.chatText"
+                <form class="form-chat-box" ng-submit="chatController.addChat()">
+                    <input class="text-input" ng-model="chatController.chatText"
                            placeholder="Enter a message">
                     <input class="send-button" type="submit" value="Kirim">
                 </form>
@@ -67,19 +68,18 @@
 </script>
 <script>
     angular.module('chatApp', [])
-        .controller('chatController', function () {
-            var chatList = this;
-            chatList.chats = [];
+        .controller('ChatController', function () {
+            this.chatList = [];
 
-            chatList.addChat = function () {
-                if (chatList.chatText.length !== 0) {
-                    chatList.chats.push({
+            this.addChat = function () {
+                if (this.chatText.length !== 0) {
+                    this.chatList.push({
                         from: 'me',
-                        text: chatList.chatText
+                        text: this.chatText
                     });
                 }
 
-                chatList.chatText = '';
+                this.chatText = '';
             };
         });
 </script>