4

I'm trying to use vis.js with AngularJS. It's working fine, I built a simple directive... But I need to use some of the events listed here, but they are not being fired.

In this example the graph.on('select', ...) event listener is not fired, there's any problem on how I'm doing this?

Here is what I'm doing:

    app.directive('visGraph', [function() {
        return {
            restrict: 'AE',
            scope: {
                data: '=data',
                options: '=options'
            },
            link: function(scope, element, attrs) {

                var container = element[0];

                var graph = null;
                    graph = new vis.Graph(container, scope.data, scope.options);


                scope.$watch(function() {
                    return scope.data; 
                }, function(value) {
                    graph = new vis.Graph(container, scope.data, scope.options);
                });

                graph.on('select', function (properties) {
                    console.info('select.properties.nodes', properties.nodes);
                    console.info('select.properties.edges', properties.edges);
                });

            }
        };
    }]);

Anyone can help?

laaposto
  • 11,835
  • 15
  • 54
  • 71
aqua
  • 377
  • 4
  • 17
  • Could you add your .html and controller code maybe in a JSfiddle? I'm interested in this problem and working on it right now. – Pak Apr 24 '14 at 16:13
  • Great! As soon as possible I'm going to publish it in a JSfiddle. Can you share what do you have right now? If you agree, we could do an AngularJS wrapper for vis.js with the directive I built and with whatever you have and then we could put it on GitHub? What do you say? – aqua Apr 24 '14 at 21:55
  • Unfortunately this is work code so I can't disclose it, but I'd be interested in contributing to a AngularJS wrapper on Github! My problem right now is that if I use a directive like yours it doesn't work because the DOM is not loaded (it's in a ng-switch-when element). I'm trying to figure this out. Right now I've put all the code in the controller including a getElementById for the container which works well, even for graph.on events, but I know I'm not supposed to manipulate the DOM like this in an angularJS controller. – Pak Apr 25 '14 at 08:14
  • I feel like I should clarify : I have to wait for asynchronously fetched data to build my graph (fetched with $resource in my controller). – Pak Apr 25 '14 at 09:00
  • My graph is also built with asynchronously fetched data and I have the element which is using 'visGraph' directive on a 'ng-switch-when' and it is working just fine.. only their event listener are not being fired. – aqua Apr 25 '14 at 12:44
  • Well I solved my problem too you're right, but with my offered solution events are fired :) – Pak Apr 25 '14 at 13:16

2 Answers2

2

I just solved this problem. In my example, double-clicking on a node redirects to the node details. I just transfered the data and options to my controller. This code is compiled from Coffeescript so it's not the most perfect JS :

angular.module("myApp.directives").directive("visGraph", function($timeout, $window) {
  return {
    restrict: "AE",
    link: function(scope, element, attrs) {
      var buildGraph;
      buildGraph = function(scope, element) {
        var container, graph;
        container = element[0];
        graph = null;
        graph = new vis.Graph(container, scope.data, scope.options);
        return graph.on('doubleClick', function(properties) {
          if (properties.nodes.length !== 0) {
            return $window.location = FRONTEND_URL + properties.nodes;
          }
        });
      };
      // Wait for data asynchronously with $resource in the controller
      scope.$watch('data', function(newval, oldval) {
        buildGraph(scope, element);
      }, true);
    }
  };
});

In your controller, define $scope.data and $scope.options. In your markup you can then just add vis-graph.

Hope it helps!

aurel
  • 54
  • 1
  • 11
Pak
  • 2,123
  • 22
  • 28
  • What happens when the '$window.location' is called? Does your view updates too? – aqua Apr 25 '14 at 12:45
  • Yes, the view change to the specified URL. – Pak Apr 25 '14 at 13:15
  • and in that moment are you redrawing the graph? The 'properties.nodes' that you are passing on '$window.location' are you accessing them through the '$routeParams' or what are you doing with them after you redirect ? – aqua Apr 25 '14 at 13:49
  • When I built my graph I made sure that properties.nodes are ids, that's why I can redirect to "#resource/:resourceId" for instance. After landing I don't need them anymore and I'm drawing a different graph. – Pak Apr 25 '14 at 13:51
  • I did some work (simple) on this... So, I have just mixed your code with mine... and I got this working without the need to redirect the data to the controller. Basically, I have added the possibility of telling the directive which event I want to trigger on vis graph and a callback function for calling a controller function from inside the directive. I have created a [repo](https://github.com/edgaraafelix/angular-visgraph) on GitHub with my directive and a simple usage example. Feel free to take a look! – aqua Apr 29 '14 at 14:05
1

I did some work (simple) on this... So, I have just mixed your code with mine... and I got this working without the need to redirect the data to the controller.

Basically, I have added the possibility of telling the directive which event I want to trigger on vis graph and a callback function for calling a controller function from inside the directive:

<div id="graph" vis-graph data="graph.data" options="graph.options" event="select" callback="callbackFunction(params)"></div>

I have created a repo on GitHub with my directive and a simple usage example.

Feel free to take a look!

aqua
  • 377
  • 4
  • 17