How to pass object to a directive in angularjs?

Question

I have a widget which is attached to a resizable directive, i have a highchart placed inside this directive and want to get this chart resized whenever the container is resized. It works well, but when i am using the same directive for different charts, i need to pass the widget id inside the directive.

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>

Directive :

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" 

      }); 
    } 
  }; 
});

dhavalcengg · Accepted Answer · 2015-01-27 13:24:58Z

1

identifierchange your HTML to following

    <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) >  
...
...

And you directive to following

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

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

answered Jan 27, 2015 at 13:24

dhavalcengg

4,7131 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dhavalcengg Over a year ago

attrs is object contains resolved value of all attributes passed in directive.

Sajeetharan Over a year ago

any idea how to get sample out of this string using javascript ? "{"text":"Sample"}"

dhavalcengg Over a year ago

why do you want to do something like that?

dhavalcengg Over a year ago

pass object into directive instead of string. It is much better solution.

dhavalcengg Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

How to pass object to a directive in angularjs?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related