AngularJS：从数组中获取动态数据

Question

我有一个 node.js、socket.io 和 Angular 应用程序，每当有人连接到服务器并将其放入我的“用户”数组时，我都会在其中创建一个“用户”对象。 现在我希望有角度来获取用户并动态更新页面以显示数组。

//users array contains all active user objects
var users =[];

//user object (example)
var exampleuser = {
    name: "Hans",
    clicks: 0,
    lang: "German"
}

//index.html angular scope for all active users
<table>
    <thead>
        <tr><th colspan="4">All online users</th></tr>
    </thead>
    <tbody>
       <tr ng-repeat="user in UserList">
          <td>{{$index + 1}}</td>
          <td><img src="./img/flags/{{user.lang}}.png" /></td>                     
          <td>{{user.name}}</td>
          <td>(clicks: {{user.clicks}} )</td>
       </tr>
    </tbody>
</table>

那么我必须如何配置我的 Angular 控制器才能从数组“users”中获取所有用户并将它们放入 angular $scope 中？谢谢

Answer 1

您必须将您的用户数组和用于更新此数组的 socket.io 代码包装在一个角度服务中，然后将此服务注入您的控制器。在您的控制器内部，您可以分配您的数组，例如$scope.userList = yourService.users;

唯一的问题是您必须将服务用户数组的更新包装在 $apply 中，以便 Angular 知道对数组的更改。这很简单：

... Inside your socket.io angular service
function updateArray(newUser){
  $rootScope.$apply(function() { users.push(newUser); };
};