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个单独的图表，而是在第一个div中只创建一个图表。请帮帮我。

Answer 1

您应该将d3.select('#chart')替换为d3.select(element[0])。

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>

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

2 个答案: