未调用 ng-click 函数答案

【问题标题】：ng-click function isn't called未调用 ng-click 函数
【发布时间】：2018-02-07 16:05:31
【问题描述】：

<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 中的脚本文件

【问题讨论】：

标签： angularjs node.js socket.io

【解决方案1】：

ng-click 在单击按钮时不起作用。我觉得喜欢没有进入函数。

哪个函数没有被调用？

我看到您将纯 Javascript 与 AngularJS 混合在一起，这不是最好的主意。当您尝试使用 AngularJS 时，请尝试坚持使用它，尝试以“Angular”的方式进行操作。

我只看到一个无法调用的函数 - sendMessage()，我假设您已经成功进入聊天室。现在我将向您解释为什么不调用您的函数：

您正在动态更新 HTML - Angular 对您的新 HTML 一无所知。为了让 Angular 知道这个新的 HTML 应该做什么，你需要 compile 这个 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);

如果我们想让上面的代码工作，我们需要注入 $compile 服务：

app.controller('groupChatController', function ($scope, $compile) { ...

其他的：

var socket = io();

// I think above code should be 
var socket = io('http://localhost:3000');

结论

这段代码可以工作，但我强烈建议你这样做。

我会做什么：

使用 ng-view + ng-route 将聊天室登录视图与聊天室视图分开 - 请参阅this 例如如何使用 ng-view和 ng-route
聊天室登录和实际聊天室使用不同的控制器
使用 AngularJS 提供给我们的神奇绑定更新我的视图，不通过 VanillaJS（getElementById、querySelector 等）更新视图

所以当使用 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>

$scope.messages = [];
socket.on('newmsg', function (data) {
    if (user) {
        $scope.messages.push(data);
    }
});

在使用 AngularJS 时尝试使用更多 Angular 风格:)

【讨论】：