Getting Angular scope variable into Sigma.js and back out again

I have been playing around with setting up a Sigma.js directive to integrate a network graph into a single page Angular JS app.

The basic directive setup was reasonably straight forward, but I wanted to add an onClick function to the nodes in the graph that would update the Angular controller model - but of course the Sigma node click event is outside the Angular world. Thanks to the joys of javascript closures though I found one reasonably easy way to do it.

The onClick binding is added in the directive link: using a function reference, rather than enclosing the actual function, eg.

s.bind('clickNode', clickNode);


instead of

s.bind('clickNode', function(e){ onClick.detail.here;});


The actual clickNode function is then also included in the directive link: where it has access to the directive's isolated scope. In this case I have an object on the scope called 'tweeter' with a two way data bind.

function clickNode(e) {
    
    scope.$apply(function(){
        scope.tweeter.handle = e.data.node.label;
    });
}


When a node is clicked the 'handle' field of the scope.tweeter object is updated with the label of the node, and this is all wrapped in an Angular scope.$apply function which ensures that the change is noticed by Angular.  The corresponding value in the controller is then updated ...... then just like magic the node label from Sigma.js appears in my Angular view template.

Seems to work a treat - but let me know if there is a better way to be doing this?

Comments