角度变量在编辑输入字段之前不显示

Angular variables not appearing until editing input field

本文关键字：显示字段输入变量编辑更新时间：2023-09-26

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

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

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

爪哇语

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")
            }
        }
    };
})

索引.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);
            }

谢谢奥利弗

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

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