Question

我有一些Angular演示工作，我一直在做一个基于node.js的简单聊天服务器。

我可以发布节点服务器，但我怀疑它是否存在问题，因为服务器正在将数据立即返回到页面和日志中。

将消息提交到服务器后，在您再次输入输入框之前，它不会更新下面的框以显示您的消息。

的Javascript

angular.module('main', [])
.controller('main-div', function($scope, $http) {
    $scope.hasLoggedIn = false;
    var loginName;
    $scope.messageList = [];

    $scope.login = function() {
        if ($scope.loginName) {
            // Perhaps have some validation so you can't duplicate names
            loginName = $scope.loginName;
            console.log($scope.loginName + " has logged in!");
            $scope.hasLoggedIn = true;

            // They then have the ability to send off messages once logged in
            var connection = new WebSocket("ws://"+window.location.hostname+":8081");
            // Send the loginName first, If 1st message then sets username
            // Else if not then just stores message
            connection.onopen = function () {
                console.log("Connection opened by: " + $scope.loginName)
                connection.send($scope.loginName);
                $scope.submit = function() {
                    var chatMessage = $scope.chatMessage;
                    if (chatMessage) {
                        connection.send(chatMessage);
                        $scope.chatMessage = '';
                    }
                };
            }

            connection.onmessage = function (event) {
                console.log("Got the message here");
                $scope.messageList.push(event.data);
                console.log("Pushed");
                console.log($scope.messageList);
            }

            connection.onclose = function () {
                console.log("Connection closed")
            }
            connection.onerror = function () {
                console.error("Connection error")
            }
        }
    };
})

的index.html

<html>
<head>
<meta charset="utf-8">
<title>Chat</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script type="text/javascript" src="/angular.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body ng-app="main">

<div class="col-md-8 col-xs-offset-2" ng-controller="main-div">
    <div ng-hide="hasLoggedIn">
        <h1>Please Login</h1>
        <form ng-submit="login()">
            <input type="text" ng-model="loginName" placeholder="Please enter your name">
            <input type="submit" id="submit" value="Submit" />
        </form>
    </div>

    <div class="col-md-8 col-xs-offset-2" ng-show="hasLoggedIn">
        <h1> Welcome {{loginName}}</h1>
        <div class="chat">
            <form ng-submit="submit()">
                <input type="text" ng-model="chatMessage" placeholder="Please enter a message">
                <input type="submit" id="submit" value="Submit" />
            </form>
            <div ng-repeat="message in messageList">
                {{message}}
            </div>
        </div>
    </div>
</div>
</body>
</html>

浏览器中的所有控制台日志都会立即显示，我发送邮件之间实际上没有任何延迟，并且记录在：

connection.onmessage = function (event) {
                console.log("Got the message here");
                $scope.messageList.push(event.data);
                console.log("Pushed");
                console.log($scope.messageList);
            }

谢谢，奥利弗

Answer 1

您可以尝试为$ scope.messageList.push（event.data）添加$ apply，如下所示：

TextUtils.isEmpty()

角度变量直到编辑输入字段才出现

1 个答案: