Question

我编写的代码可以制作甜甜圈图表。我写的JS有一个名为“createChart”的函数，我可以传递一些JSON数据，它将根据数据构建HTML格式的圆环图。目前我只是把它放到提供的目标中。

我的想法是，如果我可以创建一个包含自定义代码的指令，并返回圆环的HTML，我可以将其指定给指令中的“模板”并输出该模板HTML进入我的页面。

该指令需要使用从转发器或页面模板中的其他绑定提供的数据。

是否有一种简单的方法可以执行此操作以及在指令中使用的正确函数是什么，即：它是.controller，还是.compile，还是.link？

基本上我想要的是一个指令，我可以放置我的所有图表代码，它可能在转发器中消耗数据（我的页面有图表行），并将生成的HTML输出到页面中。能够在转发器中使用它是关键。

以下是我想要在LINK函数中执行的操作：

app.directive("donut", function () {
return {
    restrict: 'E',
    template: '<div><b>{{donut.name}}</b></div>',
    scope: {
        donut: '='
    },
    replace: true,
    //compile : compile,
    link : link
};

function compile(){
    console.log(donut)
}

function link(){
    var html = '';
    for(var x = 0 x < donut.values.length; x++){
        html += '<b>' + values[x] + '</b>';
    }
    template = html;
}
});

这是最终的HTML应该是什么样的：

<svg id="svgTarget1" class="svg-target" width="100%" height="150" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="geometricPrecision">
<path d=" M210,150 A60,60 0, 1,0 120.62400768209682,202.31683357523173 L110.83201024279576,219.75577810030896 A80,80 0, 1,1 230,150 z" fill="rgb(92,92,92)" stroke="rgb(92,92,92)" stroke-width="1"></path> 
<path d=" M120.62400768209682,202.31683357523173 A60,60 0, 0,0 155.91452533214658,209.7077749551547 L157.88603377619543,229.6103666068729 A80,80 0, 0,1 110.83201024279576,219.75577810030896 z" fill="rgb(125,125,125)" stroke="rgb(125,125,125)" stroke-width="1"></path> 
<path d=" M155.91452533214658,209.7077749551547 A60,60 0, 0,0 161.24287887514345,208.93723504372133 L164.99050516685793,228.5829800582951 A80,80 0, 0,1 157.88603377619543,229.6103666068729 z" fill="rgb(151,151,151)" stroke="rgb(151,151,151)" stroke-width="1"></path> 
<path d=" M161.24287887514345,208.93723504372133 A60,60 0, 0,0 210,150.00000000000003 L230,150.00000000000003 A80,80 0, 0,1 164.99050516685793,228.5829800582951 z" fill="rgb(211,211,211)" stroke="rgb(211,211,211)" stroke-width="1"></path> 
<path id="node0" d=" M109.58613592203994,80.95856613389196 L94.43093689280492,55.06802843410145 " stroke="rgb(211,211,211)" stroke-width="2"></path> 
<path id="node1" d=" M133.6012676966216,228.30122335469693 L127.45174308285469,257.66418211270826 " stroke="rgb(211,211,211)" stroke-width="2"></path> 
<path id="node2" d=" M161.44979865688956,229.1763986975708 L165.74347315322314,258.86754820915985 " stroke="rgb(211,211,211)" stroke-width="2"></path> 
</svg>

Answer 1

将尝试给出快速描述，这应该可以帮助您实现您想要的目标

app.directive("donut", function () {
    blah blah blah....
    ......        
    link : function (scope, element) { 
      element              // Use it to manipulate DOM
                           // In your case, your loop

      scope.$apply()       // Use this function to apply changes to the model

      scope.$watch('donut', functionWhatToDo, false/true (object equality check));
      // Use this to watch for model changes and apply changes to your DOM

    }
};

Answer 2

您传递的值可通过scope对象访问;该对象需要传递给您希望使用的指令函数：

app.directive("donut", function () {
return {
    restrict: 'E',
    template: '<div><b>{{donut.name}}</b></div>',
    scope: {
        donut: '='
    },
    replace: true,
    //compile : compile,
    link : link
};

function compile(){
    console.log(donut)
}

function link(scope){
    var html = '';
    for(var x = 0 x < scope.donut.values.length; x++){
        html += '<b>' + scope.donut.values[x] + '</b>';
    }

如何：角度指令中的自定义代码？

2 个答案: