如何在多個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>