Как передать объект в директиву в angularjs?

Question

У меня есть виджет, который прикреплен к изменяемой по размеру директиве, у меня есть highchart, размещенный внутри этой директивы, и вы хотите, чтобы эта диаграмма изменялась каждый раз, когда размер контейнера изменяется. Он работает хорошо, но когда я использую ту же директиву для разных диаграмм, мне нужно передать идентификатор виджета внутри директивы.

HTML:

<div ng-controller="CustomWidgetCtrl" plumb-item class="item" style=" top: 50px; left: 110px; height: 500px; width: 500px; " ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }" 
data-identifier="{{widget.id}}" resizeable ng-click="resize(widget) >    
    <div ng-if="widget.type === 'All'" class="box" > 
     <div class="box-header" >     
     <div class="box-header-btns pull-right" style="top:10px" > 
     <a title="Data" ng-click="toggleModal(widget)" class="glyphicon glyphicon-list-alt"></i><a> 
     <a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a> 
     <a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a> 
     </div> 
     </div> 
      <div ng-controller="highchartCtrl"> 
      <highchart id="widget.id" config="widget.chartConfig" ></highchart> 
        </div> 
     </div>   
    </div> 
</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" 

     }); 
    } 
    }; 
}); 

Answer 1

identifierchange ваш HTML к следующему

<div ng-controller="CustomWidgetCtrl" plumb-item class="item" style=" top: 50px; left: 110px; height: 500px; width: 500px; " ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }" 
    data-identifier="{{widget.id}}" resizeable ng-click="resize(widget) > 
... 
... 

И директивы к следующим

routerApp.directive('resizeable', function() { 
    return { 
    restrict: 'A', 

    link: function(scope, element, attrs) { 
    var widgetId = attrs.identifier; 
... 
...