node.js - AngularJS socket.IO Bootstrap Modals 仅一次

Question

当我将 AngularJS 与 NodeJS 和 socket.io 一起使用时， Bootstrap 模式窗口出现问题。我一直在谷歌上搜索，似乎这个问题有一个解决方案，但由于某种原因，当我尝试与 Socket.io 一起实现它时它不起作用。我在两个不同的地方使用了模态 - 当我单击静态 div 时(工作完美)，当我收到来自 webSockets 的消息时(仅打开一次，然后什么也没有)。我想我的 JS 代码可能有问题，因为当我点击静态 div 时的模式工作正常，但我不知道。

我有一个地址，当访问此链接时，我将通过 WebSockets 向客户端发送一些数据。客户端事件如下所示:

socket.on('patient', function(data){
    modalInstance = $modal.open({
    templateUrl: 'templates/patient.js',
    controller: 'patientModalCtrl',
    resolve: {
      details: function(){return data;}
    }
  });
});

和:

socket.on('alergy',function(data){
  modalInstance = $modal.open({
    templateUrl: "templates/alergy.js",
    controller: 'alergyModalCtrl'
  });
});

这两种方法都只能工作一次，然后模式窗口就会停止出现。有趣的是，当我发出“过敏”，然后再次发出“病人”时，我会得到一个“过敏”窗口，然后病人窗口在其下方出现第二个“过敏”窗口。

发射看起来像这样:

app.get('/api/socket/hash/:hash', function(req, res){ 
    var hash = req.params.hash;
    //allergy
    if(hash === "3fDecCD"){
        connected_sockets[0].emit('alergy', {alergy: true});
        res.json({status: true});
    }
    //patient detail
    else if(hash === "Vc43Sf"){
        connected_sockets[0].emit('patient', {name: 'Jan', surname: 'Bjornstad'});    
        res.json({status: true});
    }
    else{
        res.json({status: false});
    }
});

我的模板如下所示:

<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header"></div>
    <div class="modal-body" style="background-color: #FFD1D1;">
        <h1 style="text-align: center; color: red;">Allergy!</h1>
        <h2 style="text-align: center; color: red;">The patient is allergic to opium!</h2>
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning" ng-click="cancel()">Close</button>
    </div>
</div>
</div>

我正在使用 AngularJS 1.0.7，Bootstrap CSS 2.3.1

Answer 1

我想说的是，你的套接字事件监听器正在“AngularJS 世界之外”触发，因此 AngularJS 机制不会启动其 2 路数据绑定(bind)“魔法”。准确地说，您没有进入 AngularJS $digest 循环，因此绑定(bind)不会更新， promise 不会解析等。

简单的解决方法是将对 AngularJS 特定代码的调用(此处 - 对 $modal 服务的调用)包装到 Scope.$apply 方法中，例如:

socket.on('alergy',function(data){

  $scope.$apply(function(){
    modalInstance = $modal.open({
      templateUrl: "templates/alergy.js",
      controller: 'alergyModalCtrl'
    });
  });

});