在 AngularJS 中使用从 websockets 动态获取的外部 JSON 数据自动更新 DOM

Update DOM automatically with dynamically acquired external JSON data from websockets, in AngularJS

本文关键字：数据 JSON 外部 DOM 更新 获取 AngularJS 动态 websockets      更新时间：2023-09-26

我有一个基于 websocket 的应用程序，它以 JSON 对象的形式将数据"推送"到客户端。

我需要自动更新 DOM，使用我通过 websocket 协议通过 AngularJS 检索的 JSON。我找不到一个简单的方法来做到这一点，并且对 websocket 检索代码的更改不是解决问题的方法。

这篇文章，虽然是针对 Socket.io 用户（我没有使用），但涉及使用一个相当大的JavaScript，看起来太麻烦了，而这篇文章建议将变量附加到$window对象 - 这不是最好的方法。

假设两件事：

  • 我有一段JSON，我需要自动更新DOM，这是AngularJS的外部
  • 我试图避免大量的代码要求来实现这一点

我怎样才能实现我的要求？

我正在使用我的jsfiddle在JSON更新时更新DOM（表），但是JSON在Angular代码中。我的 JSON 将在它之外。

好的，所以要找到如何做到这一点并不像预期的那样容易，但这是我找到的一个解决方案的一般要点 - 非常感谢任何其他解决方案。

您需要：

  • 使用 ng-init 定义一组默认的 JSON 值。这些将是在任何数据传递到 Angular 范围之前出现的内容。这实际上可能是一个空的 JSON 对象，因此几乎没有额外的编码。

  • 在单独的非角度代码中，您需要检索将 ng-init 指令附加到的对象的作用域，然后使用 $apply 方法更新作用域中的 JSON。

这就是我要说的。假设我有一个标签列表，并且我想从外部源添加一个新标签。

<ul id="tags" ng-init="tags = [{name: 'somejson'}]">
    <li ng-repeat="tag in tags">
        {{tag.name}}
    </li>
</ul>

请注意，我们已经为 ul 元素提供了一个id字段，以便我们稍后可以在外部到角度 JavaScript 中引用它。代码很简单。它将循环访问标签并在li中显示"somejson"。

现在让我们的外部函数更新这个 JSON。

setTimeout(function() { 
    var scope = angular.element($("#tags")).scope();
    scope.$apply(function() {
        scope.tags.push({name: 'ANOTHER LI HERE PLEASE'});
    });
}, 5000);

我已经将代码包装在setTimeout()调用中，因此更新需要 5 秒，您实际上可以看到 DOM 的变化。首先，获取 #tags 元素的作用域，然后使用 $apply 将自定义函数应用于作用域内的任何变量。

在本例中，我将添加一个自定义 LI。但是，使用我自己的代码，当从服务器检索数据时，我将从 websocket 检索到的 JSON 推入此.push()方法中，而不是在 setTimeout 中。

这是一个JSFiddle。

相关文章：