时间戳

首页 > 解决方案 > JavaScript：在 plotly.js 图中的 plotly_click 事件中打开 ui.bootstrap 模式

javascript - JavaScript：在 plotly.js 图中的 plotly_click 事件中打开 ui.bootstrap 模式

问题描述

我正在使用 AngularJS 框架开发 Web 服务器。在此服务器中，我正在创建交互式绘图，因此当用户单击绘图曲线时，会出现一个模式窗口。这些绘图在 plotly.js 中创建，模态窗口使用指令创建ui.bootstrap.modal。然后，当用户单击绘图时，plotly_click将调用包含显示模式的函数的事件。

问题是模态仅在您第一次单击绘图时出现。之后，如果您关闭或关闭模态，当您再次单击绘图时，不会出现模态窗口。从控制台我可以看到创建模态的函数正在正确执行。如果我从事件外部调用创建模式窗口的函数plotly_click，一切正常。

这一切让我觉得创建模态的函数很好。然后，我认为问题出在 plotly.js 代码中或plotly与ui.bootstrap.modal指令之间的交互中。

这是我的 plotly.js 代码的简化。为了清楚起见，我不会包括如何创建数据：

var create_plot = function() {
    var myPlot = document.getElementById('myDiv');
    // Define the data, annotations and layout that the plot will have //
    var data_list = [...];
    var annotations = [...];
    var layout = [...];
    var config = {
      "scrollZoom": true
    }
    Plotly.newPlot('myDiv', data_list, layout, config);
    myPlot.on('plotly_click', function(data) {
        // This code will be executed when clicking in the plot //
        var j = data.points['0'].data.name.split(" ")[data.points['0'].data.name.split(" ").length - 1]
        $scope.showModal($scope.data.clusters[j])
      }
    };

这是showModal创建模态窗口的函数：

$scope.showModal = function(cluster_data) {
  $scope.input_data = cluster_data
  $scope.modalInstance = $modal.open({
    animation: true,
    ariaLabelledBy: 'modal-title',
    ariaDescribedBy: 'modal-body',
    templateUrl: './views/popup_templates/scan_modal.html',
    windowClass: 'large-modal-window',
    scope: $scope,
    bindToController: true,
    controller: 'd2pResultController', // POP-UPS will be ruled by the same controller as the whole html
    size: 'lg',
  });
}

有人知道可能出了什么问题吗？

非常感谢！

标签： javascriptangularjsbootstrap-modalangular-ui-bootstrapplotly.js

解决方案

您需要在 $scope.$apply 内执行此操作，因为事件不受角度控制。

$scope.$apply(function(){
     $scope.showModal($scope.data.clusters[j])
});

推荐阅读