How to add visjs events in angularjs?

Question

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 1

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!

Answer 2

In your controller you define a callback method that should be executed when the event is fired e.g.:

function actOnEvent($event){
     window.alert($event. ...);
};

$event is the populated event with all info you need. Then still in your controller you need to map the event to your function e.g.:

var vm = this;
vm.events = { click: actOnEvent};

and in your html template you have e.g.

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