Question

我正在设计一个网络应用程序。我在前端使用带有Java后端的AngularJS。 Web应用程序正在war文件中部署到本地JBoss服务器。我目前有一个Java类，它执行一系列计算，并每隔10秒将该数据作为JSON发送到客户端。这有效，但我想用AJAX（？）更新包含此数据的元素。

在Angular中，我有一些使用Java RESTful API的$resource服务。这是所有JSON数据，由单个控制器传播到视图中。然后我有ng-repeat生成的一些HTML元素，它们都有相同的类。我想使用其中一个类来每10秒触发一次对所有元素的刷新。以下是我正在讨论的ng-repeat代码段：

<div ng-repeat="mq in mqDepth">
     <progressbar class="mq" max="max" value="dynamic" ng-init="dynamic=mq.currentDepth" type="info>
        <span>
            {{dynamic}} / {{max}}
        </span>
     </progressbar>
</div>

在上面的代码段中，正在更新的数据是mq.currentDepth。

这是我用来刷新的代码：

function refreshQueue() {
    $('.mq').load('', function() {
        $(this).unwrap();
    });
}

refreshQueue();
setInterval(function() {
    refreshQueue();
}, 10000);

我得到一个警告，基本上说明我实施AJAX的方式会破坏我的用户界面，这是在一系列更新之后所做的。

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

我有几个问题

您可以使用AJAX中的类更新元素的内容，还是仅使用ID？
我应该使用AJAX刷新页面吗？
如果没有，那么我将如何用Angular实现呢？

Answer 1

从javascirpt执行同步网络调用将阻止主线程，这可能会阻止您的UI，因此不建议。回答你的问题。

当你使用angular时，你不应该使用类或id（使用选择器）来访问元素，就像我们使用jQuery一样。相反，你应该使用数据绑定。
您不需要AJAX来刷新页面。
您可以使用现有的$resource来检索数据。在控制器中获得数据后，将其保存在范围变量中。然后，您可以使用angular-expression在HTML中使用相同的变量来更新数据。

$scope.mqDepth = MqDepth.get({ id: id });

JavaScript：用于刷新具有相同类的元素内容的计时器

1 个答案: