gpt4 book ai didi

javascript - 更新 AngularJS Controller 的数据

转载 作者:行者123 更新时间:2023-12-02 16:54:06 25 4
gpt4 key购买 nike

我正在编写一个简单的 AngularJS 脚本来从 socket.io 事件加载数据,然后将其添加到 ng 模板中,这是我的 JS:

// Socket.io logic:
var messages = [];
socket.on("chat message", function(message){
messages.push(message); //message = {username: String, text: String}
});

// AngularJS logic:
var app = angular.module("chat", []);
app.controller("MessagesCtrl", function ($scope) {
$scope.messages = messages;
})

现在我想了解当新消息添加到我的消息中时如何更新我的 ng 模板[]...

这是一次尝试的示例:http://jsfiddle.net/v8v67ohn/1/
正如您所看到的,单击按钮没有任何反应...

我做错了什么?

最佳答案

使用 ng-click 而不是在 jQuery 事件处理程序中设置新的 MessagesCtrl。

你可以这样做:

JS:

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

app.controller('MessagesCtrl', function ($scope) {
$scope.messages = [{username: "foo", text: "hi"}, {username: "bar",text: "hey"}, {username: "foo",text: "LOL"}]

$scope.onClick = function() {
$scope.messages = [{username: "foo", text: "hi"}, {username: "bar",text: "hey"}, {username: "foo",text: "LOL"}, {username: "new one", text: "Hi all, I'm new here"}]
};
});

HTML:

<body ng-app="myApp" ng-controller="MessagesCtrl">
<script type="text/ng-template" id="message.html">
<b>{{message.username}}</b>: {{message.text}}
</script>
<div>
<div ng-repeat="message in messages" ng-include="'message.html'">
</div>
</div>
<button id="click" ng-click="onClick()">aaaa</button>
</body>

请参阅jsfiddle-demo

关于javascript - 更新 AngularJS Controller 的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26312762/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com