任何将vis.js与AngularJS一起使用的人

Anyone using vis.js with AngularJS?

本文关键字：一起 AngularJS vis js 任何      更新时间：2023-09-26

我正在尝试将vis.js与AngularJS一起使用。它运行良好，我制定了一个简单的指令。。。但我需要使用这里列出的一些事件，但它们并没有被解雇。

在这个示例中，graph.on('select', ...)事件侦听器没有被激发，我如何做到这一点有什么问题吗？

以下是我正在做的：

    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);
                });
            }
        };
    }]);

有人能帮忙吗？

我刚刚解决了这个问题。在我的示例中，双击节点会重定向到节点详细信息。我只是把数据和选项转移到我的控制器上。这段代码是从Coffeescript编译的，所以它不是最完美的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);
    }
  };
});

在控制器中，定义$scope.data和$scope.options。然后，您可以在标记中添加vis-graph。

希望它能有所帮助！

我在这方面做了一些工作（简单）。。。所以，我刚刚把你的代码和我的代码混合在一起。。。我在不需要将数据重定向到控制器的情况下就可以实现这一点。

基本上，我添加了告诉指令我想在vis图上触发哪个事件的可能性，以及从指令内部调用控制器函数的回调函数：

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

我用我的指令和一个简单的用法示例在GitHub上创建了一个repo。

请随意查看！

相关文章：