Question

我使用ID动态生成图表，每个图表都有一个可调整大小的指令，我在其中传递chartid并根据容器大小调整大小。当图表ID被硬编码时，这种方法有效。当我生成唯一ID并使用选择器进行选择时，它不起作用。

这是我的代码，

工作：

HTML：

<div ng-controller="CustomWidgetCtrl"  class="item"    style=" top: 50px; left: 110px; height: 500px; width: 500px; " ng-repeat="widget in dashboard.widgets"   data-identifier="{{widget.id}}" resizeable   >          
    <highchart id="chart1" config="widget.chartConfig"  ></highchart>
</div>

指令：

routerApp.directive('resizeable', function() { 
  return { 
    restrict: 'A', 
    link: function(scope, element, attrs) {       
      $(element).resizable({ 
        resize: function(event, ui) {     
         var chart = $('#chart1').highcharts();            
         height = ui.size.height - 100;
         width = ui.size.width - 40;
          chart.setSize(width, height, doAnimation = true);              
           jsPlumb.repaint(ui.helper); 
        }, 
        handles: "all"     
      }); 
    } 
  }; 
});

不工作：

HTML：

<div ng-controller="CustomWidgetCtrl"  class="item"    style=" top: 50px; left: 110px; height: 500px; width: 500px; " ng-repeat="widget in dashboard.widgets"   data-identifier="{{widget.id}}" resizeable   >          
    <div ng-controller="highchartCtrl"> 
        <highchart id="widget.id" config="widget.chartConfig"  ></highchart>
    </div>
</div>

JS with directive：

 $scope.dashboard.widgets.push({
    name: $scope.chartConfig.title,
    id: "chart" + Math.random().toString(16).slice(2),
    type:"All",
    chartTypes: $scope.chartTypes,
    data:$scope.data
  });

routerApp.directive('resizeable', function() { 
  return { 
    restrict: 'A', 
    link: function(scope, element, attrs) {       
      $(element).resizable({ 
          resize: function(event, ui) {     
          var  widgetId = attrs.identifier;     
          var chart = $('#chart'+widgetId).highcharts();            
          height = ui.size.height - 100;
         width = ui.size.width - 40;
          chart.setSize(width, height, doAnimation = true);          
           jsPlumb.repaint(ui.helper); 
        }, 
        handles: "all" 

      }); 
    } 
  }; 
});

在上面，widgetid是随机生成的id并附加到图表中，但是当我在cosole中评估图表时，它变得未定义。有什么想法吗？

为什么动态选择器不能与指令一起使用？

0 个答案: