Angular won't showing my array result in HTML

Question

I got problem with my angular ... I currently working for a simple chat broadcast with socket io, but why my array object won't show up in html after socket io catch the emit

Here's my code for 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>

and here's the code for my 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);
    });
}

and this is my 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);
        });
    });
});

as you can see I was running my socket io via gulp, it's worked actually, but the problem is with $scope.conversation in my index.html, why won't it change ?

Is your console.log($scope.conversation); showing the value correctly?? — DilumN
– DilumN, Commented Mar 7, 2017 at 8:49
yeah it's showing the correct result in here socket.on('broadcast', function(data){ $scope.conversation = data; console.log($scope.conversation); }); — KZulfazriawan
– KZulfazriawan, Commented Mar 7, 2017 at 8:53
You should probably add a form tag ... that might be a good place to start. — rrd
– rrd, Commented Mar 7, 2017 at 9:04
Your code should work fine. Looking at your code I can't find the issue. But try <pre>{{ message }}</pre> & tell me the output — DilumN
– DilumN, Commented Mar 7, 2017 at 9:07
the result is value from this <textarea name='message' ng-model='message'></textarea> — KZulfazriawan
– KZulfazriawan, Commented Mar 7, 2017 at 9:17

Banshi Lal Dangi · Accepted Answer · 2017-03-07 09:38:24Z

2

It might be an issue with $scope binding, so try by adding the $scope.$digest(); after the $scope.conversation = data;

answered Mar 7, 2017 at 9:38

Banshi Lal Dangi

6753 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular won't showing my array result in HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related