AngularJS에서 vis.js를 사용하는 사람은 누구입니까?

Question

vis.js을 AngularJS와 함께 사용하려고합니다. 괜찮 았어, 난 간단한 지시문을 만들었 어 ... 하지만 나열된 이벤트 중 일부를 사용해야합니다 here,하지만 그들은 해고되지 않습니다.

이 예제에서는 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); 
       }); 

      } 
     }; 
    }]); 

사람은 도움이 될 수 있습니다 : 여기

는 내가 뭘 무엇인가?

Answer 1

방금이 문제를 해결했습니다. 예제에서 노드를 두 번 클릭하면 노드 세부 정보로 리디렉션됩니다. 방금 컨트롤러에 데이터와 옵션을 전송했습니다. 그것은 가장 완벽한 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을 추가하면됩니다.

희망이 있습니다.

Answer 2

이 작업에 약간의 (간단한) 작업을 했으므로 코드를 섞어서 컨트롤러에 데이터를 리디렉션하지 않아도됩니다. 나는 repo 만든

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

:

기본적으로, 나는 마주 그래프에 트리거 할 이벤트 지시어를 이야기의 가능성과 지침 내부에서 컨트롤러의 기능을 호출하는 콜백 함수를 추가 한 내 지시어와 간단한 사용 예제를 사용하여 GitHub에.

언제든지 살펴볼 수 있습니다.