将数据从控制器设置为指令

时间:2013-07-03 19:29:18

标签: angularjs angularjs-directive

我创建了这样的指令文件:

 angular.module('myApp')
.directive('rGraph', function() {
  return {
    link: function ( scope, element, attrs ) {


        var width = Math.max($("#graph-container").innerWidth(), 400);
        var height = Math.max(width, 550);

      var rgraph = new $jit.RGraph({
        injectInto: 'graphcontainer',
          width: width,
          height: height,
        background: {
          CanvasStyles: {
            strokeStyle: '#555'
          }
        },
        Navigation: {
          enable: true,
          panning: true,
          zooming: 10
        },
        Node: {
          color: '#ddeeff',
          overridable: true

        },
        Edge: {
          color: '#C17878',
          lineWidth: 1.0
        },
        onCreateLabel: function(domElement, node){
          domElement.innerHTML = node.name;
          domElement.onclick = function(){
            rgraph.onClick(node.id, {
              onComplete: function() {
              Log.write("done");
              }
            });
          };
        },
        onPlaceLabel: function(domElement, node){
          style = domElement.style;
          style.display = '';
          style.cursor = 'pointer';
            if (node._depth <= 1) {
                style.fontSize = "0.8em";
                style.color = "#ccc";

            } else if(node._depth == 2){
                style.fontSize = "0.7em";
                style.color = "#494949";

            } else {
                style.display = 'none';
            }
            var left = parseInt(style.left);
            var w = domElement.offsetWidth;
            style.left = (left - w / 2) + 'px';
        },

        onBeforePlotNode: function(node){
          if (node.data.type == 'group') {
            node.setData('type', 'square');
          } else if (node.data.type == 'judge') {
            node.setData('type', 'star');
            node.setData('dim', '8');
          }
        }
      });


//Here I need to set the data
        rgraph.loadJSON();
        rgraph.refresh();
        // Completing animations on every change was too much
        // TODO come up with better way to watch for changes
         rgraph.graph.eachNode(function(n) {
           var pos = n.getPos();
           pos.setc(-200, -200);
         });
         rgraph.compute('end');
         rgraph.fx.animate({
            modes:['polar'],
             duration: 2000
         });

    }
  };
});

我的控制器是这样的:

angular.module('myApp').controller('AnalysisCtrl', ['$scope', '$http', '$q', 'SearchService', function($scope, $http, $q, SearchService) {
$scope.graph_data = {
      'id': 'judge_id',
      'name': judge.name,
      'type': 'judge',
      'children': filters
}

我的观点是我调用指令的地方是这样的:

<div id="graphcontainer" r-graph="graph_data"></div>

现在我需要将来自控制器的数据get,即$ scope.graph_data的数据添加到rgraph.loadJSON();指令。那么怎么做。

由于 Sabbu

0 个答案:

没有答案