jsPlumb beforeDrop 和 ngToast 消息没有立即显示

Question

我在一个使用很棒的 jsPlumb 库创建节点界面的网站上工作。

jsPlumb 有一个事件 'beforeDrop' 在连接两个端点之间的连接之前触发，我想用它来检查条件，然后决定是否允许连接。

如果不允许连接，我想使用 ngToast 向用户显示消息。

这是我的'beforeDrop'函数

jsPlumb.bind('beforeDrop', function(info){

    // Check that they property types match
    var outNodeType = $('#'+info.sourceId).data( "ptype" );
    var inNodeType = $('#'+info.targetId).data( "ptype" );


    if(outNodeType !== inNodeType){

        showMessage('warning', '<strong>Error:</strong> unable to connect '+outNodeType+' to '+inNodeType)

        return false // false for not establishing new connection

    }

    return true; // true for establishing new connection

});

这是显示 ngToast 消息的函数：

function showMessage(messageType, message){
        ngToast.warning({
            class: messageType,
            content: message
        });
    }

问题是 ngToast 消息只有在我单击页面上的任意位置后才会出现。单击后，消息出现，一切正常。

我不知道这是 jsPlumb 和 angularjs 的问题，还是我调用 ngToast 函数的方式的问题。

如果有任何关于如何解决此问题的建议，我将不胜感激。 TIA！

Answer 1

jsPlumb 事件将被视为 angular 上下文之外的事件。似乎您是从 angular 代码外部调用 angular 代码。 make syncangular需要在调用toaster消息方法后调用$scope.apply()。这样，当您点击它时，该吐司就会立即显示出来。

jsPlumb beforeDrop 和 ngToast 消息没有立即显示

jsPlumb beforeDrop and ngToast message not showing instantly

javascript

jsplumb

angularjs

ngtoast