Ricky Ricky - 19 days ago 6
AngularJS Question

How to add visjs events in angularjs?

In visjs doc there is a

stabilizationProgress
event which I need to enable in my angularjs project. I have created a plunker demo for the same.

I tried something like below, but not sure how to add a progress bar using angularjs. Here is a link to give an idea

<vis-network data="data" options="options" events="events"></vis-network>


Controller code

$scope.events = [{
stabilizationProgress: function (obj) {

},
stabilizationIterationsDone: function () {

}
}];

Answer

Enable a directive that will transport the data between angular and vis. Every characteristic of vis can be mimified on angular, integrating vis to its $digest cycle.

Directives are to deal with DOM manipulation and integration with third party plugins like vis.

For example, if you want to get something updated when vis tells something, you can achieve like the below (supposing that vis.event() is a real method from vis API):

/* On directive's link() function */

vis.event('bla-bla-bla', function (arg1, arg2, arg3) {
    scope.$evalAsync(function () {
        scope.emit('vis:bla-bla-bla', arg1, arg2, arg3);
    });
});

On your controller, you can listen to this event:

// On a parent controller where the directive is placed
//
// The $scope below can be $scope too,
// but it will traverse all child scopes first
$scope.$on('vis:bla-bla-bla', function ($event, arg1, arg2, arg3) {
    $event.stopPropagation(); // Useful, to avoid performance leak

    console.log($event, arg1, arg2, arg3);
});

Edit 1:

I've read a bit of the Plunkr that you pointed out:

http://plnkr.co/edit/XlRkfazfYBmj0GM1PTeC?p=info

The events system is already there, you were missing the attribute on the vis-network element, the events one, with the events wanted binded to it.

I suggest to you to comment out some of them and uncomment one each time to see it working. At the moment, they are all active and logging on console!

Comments