1

我是 angularjs 的新手，我想了解指令的作用，但我找不到具有不同示例的复杂性教程，如果我可以在指令中移动以下代码，我会很好奇。

这是我的 javascript 文件（controller.js）：

function TestCtrl(){
 var json = {
         id:"judge_id",
         name:"Test",
         children: [  {
             id:"filter_1",
             name:'Filter 1',
             children:[{id:"case_1",name:"CaseA",children:[]},{id:"case_2",name:"CaseB",children:[]},{id:"case_3",name:"CaseC",children:[]}]
         },
             {
                 id:"filter_2",
                 name:'Filter 2',
                 children:[]
             },
             {
                 id:"filter_3",
                 name:'Filter 3',
                 children:[]
             },
             {
                 id:"filter_4",
                 name:'Filter 4',
                 children:[]
             },
             {
                 id:"filter_5",
                 name:'Filter 5',
                 children:[]
             },
             {
                 id:"filter_6",
                 name:'Filter 6',
                 children:[]
             }

         ]


     };


var rgraph = new $jit.RGraph({
    //Where to append the visualization
    injectInto: 'infovis',
    background: {
        CanvasStyles: {
            strokeStyle: '#555'
        }
    },
    //Add navigation capabilities:
    //zooming by scrolling and panning.
    Navigation: {
        enable: true,
        panning: true,
        zooming: 10
    },
    //Set Node and Edge styles.
    Node: {
        color: '#ddeeff'
    },

    Edge: {
        color: '#C17878',
        lineWidth:1.5
    },


    //Add the name of the node in the correponding label
    //and a click handler to move the graph.
    //This method is called once, on label creation.
    onCreateLabel: function(domElement, node){
        domElement.innerHTML = node.name;
        domElement.onclick = function(){
            rgraph.onClick(node.id, {
                onComplete: function() {
                    Log.write("done");
                }
            });
        };
    },
    //Change some label dom properties.
    //This method is called each time a label is plotted.
    onPlaceLabel: function(domElement, node){
        var 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';
    }
});
//load JSON data
rgraph.loadJSON(json);
//trigger small animation
rgraph.graph.eachNode(function(n) {
    var pos = n.getPos();
    pos.setc(-200, -200);
});
rgraph.compute('end');
rgraph.fx.animate({
    modes:['polar'],
    duration: 2000
});
}

我的 html 文件是这样的：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="http://philogb.github.io/jit/static/v20/Jit/jit-yc.js"></script>
    <script src="..js/controller.js"></script>

    <link type="text/css" href="../base.css" rel="stylesheet" />

    <title></title>
</head>

<body onload="TestCtrl();">
<div id="center-container">
  <div id="infovis"></div>
</div>
</body>
</html>

谢谢萨布

4

0 回答 0