Question

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

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

This post，虽然Socket.io用户（这我不使用），涉及使用一个相当大的一块的JavaScript，似乎太繁琐使用，同时this post表明附接变量到$window对象 - 这不是处理事情的最佳方式。

假设有两件事：

我有一块JSON需要自动更新DOM，即外部到AngularJS
我正在努力避免实现此代码的大量代码

我如何实现我的要求？

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

Answer 1

好的，所以要按照预期的方式找到如何做到这一点并不容易，但这是我发现的 one solution 的一般要点 - 非常感谢任何其他解决方案。

你需要：

使用ng-init定义一组默认的JSON值。这些将是在将任何数据传递到Angular范围之前出现的内容。这实际上可能是一个空的JSON对象，所以几乎没有额外的编码。
在单独的非角度代码中，您需要检索附加ng-init指令的对象的范围，然后使用$apply方法更新JSON中的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。但是，使用我自己的代码，当从服务器检索数据时，我会将从websockets检索到的JSON推送到此.push()方法，而不是在setTimeout中。

这是JSFiddle。

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

1 个答案: