<body ng-app="groupChatApp" ng-controller="groupChatController">
<div id="error-container">{{errorValue}}</div>
<div ng-model="changeForm" id="changeForm">
<input id="name" type="text" name="name" value="" placeholder="ENTER YOU NAME!" ng-model="name">
<button type="button" name="button" ng-click="setUsername()">Let me chat!</button>
</div>
</body>
<script>
var app = angular.module('groupChatApp', []);
app.controller('groupChatController', function ($scope) {
$scope.errorValue = "";
$scope.messageDisplay = "";
var socket = io();
$scope.setUsername = function () {
socket.emit('setUsername', $scope.name);
}
$scope.sendMessage = function () {
var msg = document.getElementById('message').value;
if (msg) {
socket.emit('msg', {message: msg, user: user});
}
}
var user;
socket.on('userExists', function (data) {
$scope.errorValue = data;
});
socket.on('userSet', function (data) {
user = data.username;
document.getElementById('changeForm').innerHTML = '<input type="text" id="message"><button type="button" ng-click="sendMessage()">Send</button>'
+ '<div id="message-container"></div>';
;
});
socket.on('newmsg', function (data) {
if (user) {
document.getElementById('message-container').innerHTML += '<div><b>' + data.user + '</b>: ' + data.message + '</div>'
}
});
});
</script>
Я пытаюсь приложение socket.io для группового чата - узел js. Здесь ng-click не работает при нажатии кнопки. Я чувствую, что он не входит в функцию. Когда я использую onclick и имя функции, оно работает. Но ng-click нет. Я не мог это понять. Любая помощь будет оценена.
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function (req, res) {
res.sendfile('index.html');
});
users = [];
io.on('connection', function (socket) {
console.log('A user connected');
socket.on('setUsername', function (data) {
if (users.indexOf(data) > -1) {
socket.emit('userExists', data + ' username is taken! Try some other username.');
} else {
console.log(data);
users.push(data);
socket.emit('userSet', {username: data});
}
});
socket.on('msg', function (data) {
io.sockets.emit('newmsg', data);
console.log('hi');
})
});
http.listen(3000, function () {
console.log('listening on localhost:3000');
});
Это мой файл сценария в узле js
ng-click не работает при нажатии кнопки. Я чувствую, что он не входит в функцию.
Какая функция не называется?
Я вижу, что вы смешиваете чистый Javascript с AngularJS, который не является лучшей идеей. Когда вы пытаетесь работать с AngularJS, попробуйте придерживаться его, попробуйте сделать это "Угловой" способ.
Я вижу только одну функцию, которая не может быть вызвана - sendMessage()
и я предполагаю, что вы sendMessage()
точки успешного входа в комнату чата. Теперь я объясню вам, почему ваша функция не вызывается:
Вы динамически обновляете HTML-угловое, ничего не знаете о своем новом HTML. Чтобы угловой понять, что должен сделать этот новый HTML-код, вам нужно скомпилировать этот HTML-код с требуемым объемом. Так, например, вы можете изменить свой код следующим образом:
// use angular to get this element and not the getElementById function
var container = angular.element('#changeForm');
// update HTML using html() method
container.html(
'<input type="text" id="message">' +
'<button type="button" ng-click="sendMessage()">Send</button>' +
'<div id="message-container"></div>'
);
// now in order your new HTML to work you need to compile it
$compile(container)($scope);
Нам нужно ввести службу компиляции $, если мы хотим, чтобы приведенный выше код работал:
app.controller('groupChatController', function ($scope, $compile) { ...
Что-то другое:
var socket = io();
// I think above code should be
var socket = io('http://localhost:3000');
Этот код будет работать, но я решительно отговариваю вас сделать это таким образом.
Что я буду делать:
Поэтому, используя AngularJS, выполните следующие действия:
document.getElementById('message-container').innerHTML += '<div><b>' + data.user + '</b>: ' + data.message + '</div>';
это плохая практика, и вы должны изменить ее на нечто подобное:
HTML
<ul id="message-container">
<li ng-repeat="message in messages">
<span>{{message.user}}:</span>
<span>{{message.message}}</span>
</li>
</ul>
JS
$scope.messages = [];
socket.on('newmsg', function (data) {
if (user) {
$scope.messages.push(data);
}
});
Просто попробуйте сделать это больше Угловой стиль при использовании AngularJS :)