Question

我正在尝试运行一个小的angularJS应用程序。应用程序应通过STOMP / Websockets接收异步消息。如果通过Web套接字的消息到达，则角度应用程序应在UI中显示更改的值。通常，angular的数据绑定按预期工作，但如果在回调函数on_message()内更新范围，则UI中不会发生任何事情。我已经阅读了类似主题的各种帖子，并尝试了建议的解决方案，例如在回调函数中使用$ apply，但没有成功。

在调试器中，我可以看到$ scope.SoC被分配了正确的值，但UI保持不变。

如果直接调用函数on_message(m) - 仅用于测试 - 而不是从socket-client调用，则UI会正确更新。

这是控制器代码的缩写结构

App.controller('showCaseDataCtrl', function($scope){
var mySoC = 0.7;
$scope.status = {statusMessage: "No Message", SoC: 0.77, power: 5.4, numDevices: 89};

function on_message(m) {
    mySoC ++;
    $scope.$apply(function() {$scope.status.SoC = mySoC;});
    console.log(mySoC);
}
});

这是HTML

<html ng-app="App">
...
<div class="col-md-4" >
      <h1> <span ng-bind="status.SoC" /> SoC</h1>
      <p>Charge Status</p>
</div>
...
</html>

任何建议还有什么建议值得赞赏。

更新：

问题必须与mg-route和主HTML中的单独视图

有关主HTML中的

我正在使用像

这样的语句

<!-- views selected by the route will be injected here -->
<div ng-view ="" </div>

，路由提供商看起来像

App.config(function($routeProvider){
    $routeProvider
      .when('/',
        {
            controller: 'showCaseDataCtrl', 
            templateUrl: 'partials/Overview.html'
        })
      .when('/test',
        {
            controller: 'showCaseDataCtrl',
        templateUrl: 'partials/Overview.html'
        })
      .otherwise({redirectTo: '/'});
});

删除路由提供程序并使用

将所有HTML直接放在主HTML中

<div ng-controller="showCaseDataCtrl" class="col-md-4" >
  <h1> <span ng-bind="status.SoC" /> SoC</h1>
  <p>Charge Status</p>
</div>

解决了这个问题。

---但我不知道为什么---

任何解释赞赏

Answer 1

$scope未更新的原因是因为回调发生在Angular的$ digest（）循环之外。尝试将其包装在$ scope中。$ apply。

function on_message(m) {
    // console.log('Received:' + m);
    // var MyJSON = $.parseJSON(m.body);
    mySoC ++;
    $scope.$apply(function() {
      $scope.SoC = mySoC;
    });

    console.log(mySoC);
}
});

好像你已经注释掉了，但这应该有效。

AngularJS在使用路由时不更新绑定

1 个答案: