Question

我正在使用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',
  });
}

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

非常感谢！

Answer 1

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

Set<ConstraintViolation<A>> constraintViolations = validator.validate(a);

JavaScript：在plotly.js图中的plotly_click事件内打开ui.bootstrap模态

1 个答案: