javascript - jsPlumb beforeDrop 和 ngToast 消息未立即显示

标签 javascript angularjs jsplumb ngtoast

我正在开发一个网站,该网站使用出色的 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!

最佳答案

jsPlumb 事件将被视为 Angular 上下文之外的事件。似乎您正在从 Angular 代码外部调用 Angular 代码。为了使 Angular 同步,您需要在调用 toastr 消息方法后调用$scope.apply()。这样,一旦您单击该 toast,它就会显示出来。

关于javascript - jsPlumb beforeDrop 和 ngToast 消息未立即显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33001703/

相关文章:

javascript - 使用 jsPlumb 调整元素大小并拖动元素

javascript - JsPlumb 在使用非默认实例时不建立连接

使用 css() 更改背景颜色的 JavaScript 开关

javascript - 将 forEach 更改为 for 循环

javascript - 我正在使用 Brad Frost 的 3-up Carousel,我想让面板在到达终点时循环回到开头

javascript - 将对象插入数组会删除而不是添加

javascript - 如何重置 QUnit 中的状态?

javascript - Angular js中的日期表列排序问题

javascript - 如何在 Angular js验证中添加自己的类名

javascript - Angular 5 : how to make dynamically created components draggable with jsPlumb?