javascript - Angular 不会在 HTML 中显示我的数组结果

标签 javascript angularjs node.js socket.io gulp

我的 Angular 有问题...我目前正在使用 socket io 进行简单的聊天广播,但为什么在 socket io 捕获发射后我的数组对象不会显示在 html 中

这是我的 index.html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app='BaseModule'>
<div ng-controller="ChatController">
    <input type='number' name='sender' ng-model='sender' />
    <input type='number' name='to' ng-model='to' />
    <textarea name='message' ng-model='message'></textarea>
    <button type='button' ng-click='sendMessage()'>send it</button>

    <pre>{{ conversation }}</pre>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="base.js"></script>
<script></script>
</html>

这是我的 base.js 的代码

var app = angular.module('BaseModule', []);

app.run(function($rootScope) {
});

app.controller('ChatController', ChatController);

function ChatController($scope){
    var self = window.location.hostname;
    var socket = io.connect('http://' + self + ':8890');

    $scope.to = '';
    $scope.message = '';
    $scope.conversation = [];

    socket.on('connect', function () {
        $scope.sendMessage = function(){
            var message = {
                to: $scope.to,
                sender: $scope.sender,
                message: $scope.message
            };

            socket.emit('chat', message);
        };
    });

    socket.on('broadcast', function(data){
        $scope.conversation = data;
        console.log($scope.conversation);
    });
}

这是我的 gulpfile.js

var gulp        = require('gulp');

gulp.task('socketio', function(){
    var app = require('express')();
    var server = require('http').Server(app);
    var io = require('socket.io')(server);
    var conversations = [];

    server.listen(8890);

    io.on('connection', function (socket) {

        socket.on('chat', function(data){
            conversations.push(data);
            console.log(conversations);
            socket.emit('broadcast', conversations);
        });
    });
});

如您所见,我正在通过 gulp 运行我的套接字 io,它确实有效,但问题出在我的 index.html 中的 $scope.conversation,为什么它不改变?

最佳答案

这可能是 $scope 绑定(bind)的问题,因此请尝试在 $scope.conversation = data; 之后添加 $scope.$digest();/p>

关于javascript - Angular 不会在 HTML 中显示我的数组结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42643755/

相关文章:

javascript - 在特定元素上使用捕鼠器?

javascript - AngularJs Bootstrap 设置下拉菜单项已选择

javascript - 如何编写前端(angularjs)到后端(nodejs)?

Node.js TLS "TypeError: Cannot read property ' indexOf' 未定义”

node.js - 如何在node中使用easy-ftp上传文件?

node.js - 为每个请求传递参数

javascript - 如果 aria-expanded === true 添加类

javascript - JS中的时差结果错误

javascript - 使用 React.Lazy 的动态延迟加载 (16.6.0)

angularjs - 等待 $asyncValidators 提交表单