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机制并没有踢它来做它的双向数据绑定“魔术”。准确地说，您没有输入AngularJS $ digest循环，因此未更新绑定，未解决承诺等。

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

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

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

});

AngularJS socket.IO Bootstrap Modals只有一次

1 个答案: