如何在多个div中重用angularjs条形图指令

Question

我是angularjs的新手..任何人都可以请告诉我，指令是否可重用？如果是的话，我们如何使用它们？

我有一个条形图指令：

directive('bars1', function ($parse) { 

    return { 
    restrict: 'E', 
    scope: { 
     data: '=', 
     label: '@' 
     }, 
     replace: true, 

    link: function (scope, element, attrs) { 

     var chart = d3.select('#chart') 
     .append("div").attr("class", "chart") 
     .selectAll('div') 
     .data(scope.data).enter() 
     .append("div") 
     .transition().ease("elastic") 
     .style("width", function(d) { return (d/1000)-10 + "%"; }) 
     .text(function(d) { return d ; }); 
    } 
    }; 
    }) 

我想使用的指令在2周不同的div像这样

<div id="dashboard1" > 
    <div id="bars" style="margin-top:20%"> 

    <div id="chart"> 
      <bars1 data=val></bars1> 
    </div> 
    </div> 
</div> 

<div id="dashboard2" > 
    <div id="bars" style="margin-top:20%" > 

    <div id="chart"> 
      <bars1 data=val></bars1> 
    </div> 
    </div> 


</div> 

，但它不是建立在两个div 2个独立的图表，但只有创建一个图表在第一格。请帮帮我。

Answer 1

你应该d3.select(element[0])取代d3.select('#chart')。

Answer 2

更新您的directive：

directive('bars1', function ($parse) { 

    return { 
    restrict: 'E', 
    scope: { 
     data: '=', 
     label: '@' 
     }, 
     replace: true, 

    link: function (scope, element, attrs) { 

     var chart = d3.select(scope.label)//<--use element id rather than specific 
     .append("div").attr("class", "chart") 
     .selectAll('div') 
     .data(scope.data).enter() 
     .append("div") 
     .transition().ease("elastic") 
     .style("width", function(d) { return (d/1000)-10 + "%"; }) 
     .text(function(d) { return d ; }); 
    } 
    }; 
    }) 

你HTML：

<div id="dashboard1" > 
    <div id="bars" style="margin-top:20%"> 

    <div id="chart1"><!--use different id --> 
      <bars1 data="val" label="#chart1"></bars1> 
    </div> 
    </div> 
</div> 

<div id="dashboard2" > 
    <div id="bars" style="margin-top:20%" > 

    <div id="chart2"><!--use different id --> 
      <bars1 data="val" label="#chart2"></bars1> 
    </div> 
    </div> 


</div>