如何将获取的节点数据从指令传递给控制器

时间:2016-06-16 14:04:57

标签: javascript angularjs vis.js

topology.controller.js

define(['app/topology/topology.module','app/topology/topology.services', 'app/topology/topology.directives'], function(topology, service) {

  topology.controller('TopologyCtrl', ['$scope', '$rootScope', '$location', 'NetworkTopologySvc' ,  function ($scope, $rootScope, $location, NetworkTopologySvc) {
    $rootScope['section_logo'] = 'assets/images/logo_topology.gif';
    var graphRenderer = null;

    $scope.createTopology = function() {

        NetworkTopologySvc.getNode("flow:1", function(data) {
          $scope.topologyData = data;

        });
    };

        $scope.createTopology();
    }]);
  });

topology.directives.js

define(['app/topology/topology.module', 'vis'], function(topology, vis) {

  topology.directive('topologySimple', function() {
    // constants
    var width = 800,
      height = 800;

    return {
      restrict: 'E',
      scope: {
          topologyData: '='
      },

      link: function($scope, iElm, iAttrs, controller, $window, $location) {

          $scope.$watch('topologyData', function (ntdata) {
              if(ntdata){
                  //   visinit(inNodes, inEdges, container, inOptions) {
                  var inNodes = $scope.topologyData.nodes;
                  var inEdges = $scope.topologyData.links;
                  var container = iElm[0];

                  // legend moved to topology controller

                  var data = {
                      nodes: inNodes,
                      edges: inEdges
                  };

                  var color = '#66FFFF',
                      hl = '#0066FF',
                      hover = '#33CC33',
                      BLACK = '#2B1B17';

                  var options =
                  {
                      width:  '100%',
                      height: '750px',
                      nodes: {
                          widthMin: 20,
                          widthMax: 64,
                          fontColor: BLACK
                      },
                      edges: {
                          length: 80,
                          color: {
                              color: '#070707',
                              highlight: hl,
                              hover: hover
                          }
                      },
                      physics: {
                          barnesHut: {
                              gravitationalConstant: -7025
                          }
                      },
                      hover: true,
                      groups: {
                          'switch': {
                              shape: 'image',
                              image: 'assets/images/Device_switch_3062_unknown_64.png'
                          },
                          'host': {
                              shape: 'image',
                              image: 'assets/images/Device_pc_3045_default_64.png'
                          }
                      },
                      keyboard:true,
                      tooltip: {
                          delay: 300,
                          fontColor: "black",
                          fontSize: 14, // px
                          fontFace: "verdana",
                          color: {
                              border: "#666",
                              background: "#FFFFC6"
                          }
                      }
                  };

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


                  return graph.on("click", function (params) {
            console.log(params);
                  });                 
              }
          });
      }

    };


  });
});

如何将收到的数据发送到' params'到控制器。

参数包含:         "节点":[1,2],         "链接":[3,4]

请帮助我。

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

您有几种方法可以这样做。 使用servicefactory,但您也可以使用$rootScope传递数据 - 这不是一个好习惯。简单的$rootScope示例: 在directive

$rootScope.nodes = nodes;

您可以通过controller

轻松访问它们