jsPlumb beforeDrop and ngToast message not showing instantly

Question

I am working on a site that uses the great jsPlumb library to create a node interface.

jsPlumb has an event 'beforeDrop' that is triggered before a connection between two endpoints are connected, that I want to use to check a condition, and then decide to allow the connection or not.

It the connection is not allowed, I want to use ngToast to show a message to the user.

This is my 'beforeDrop' function

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

});

And this is the function that shows the ngToast message:

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

The problem is that the ngToast message does not appear until I click anywhere on the page. Once I click, the message appears and everything works.

I don't know if this is an issue with jsPlumb and angularjs, or a problem with how I am calling the ngToast function.

I would really appreciate any suggestions as to how to resolve this. TIA!

Answer 1

jsPlumb event will be conaidered as event outside of angular context. Seems like you are calling angular code from outside of angular code. For make sync angular, you need to call $scope.apply() after calling the toaster message method. So that toast will get shown as soon as you clicked on it.