Passing variable from directive to controller in AngularJS

Question

So I have an nvd3 graph in my index.html whose height is set to {{varyingHeight}} like so (code snippet):

<nvd3-line-plus-bar-chart data="data"
           showXAxis="true" showYAxis="true"
           tooltips="true" interactive="true"
           showLegend="true"
           height='{{varyingHeight}}'
           >
 </nvd3-line-plus-bar-chart>

Now in my directive, I have a code which identifies when the height change takes place, and what the new height is:

app.directive('test', function () {
 return {
 restrict: 'EA',
 scope: {},
 link: function (scope, element) {
   scope.$on('split.resize', function() {
     console.log('I got resized');
     console.log(element.height());
    });    
  }
       };
  });

In my controller, I now want to be able to set the new height like so:

$scope.$apply(function(){
   $scope.varyingHeight = h;  
})

I'm new to angularjs so I can't figure what the best way is to do this. I have seen answers which show how to do this the other way round, i.e from the controller to the directive but this hasn't helped me. How do I pass a element.height() to variable h from the directive to the controller? Or is my code structured wrong in the first place?

Yes, ideally because I've figured out how to watch for changes on that element in the directive. But if there is a better approach, I'm willing to learn! — geekchic
– geekchic, Commented Mar 20, 2014 at 6:48

Anders Ekdahl · Accepted Answer · 2014-03-20 06:35:27Z

1

You do it by binding the height attribute to the value passed from the controllers scope. Here's an example: http://jsbin.com/vapipizu/1/edit

The important part is that you replace height="{{varyingHeight}}" with height="varyingHeight" and that your directive binds the height attribute like this:

scope: {
  height: '='
}

answered Mar 20, 2014 at 6:35

Anders Ekdahl

23k4 gold badges73 silver badges61 bronze badges

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

7 Comments

geekchic Over a year ago

Thanks for this answer, but I'm not sure I understand. The controller is the one watching for the change in this case am I right? When I change height="varyingHeight"I immediately get an Invalid value for <svg> attribute height="varyingHeight" error and my graph isn't rendered at all.

Anders Ekdahl Over a year ago

You can have watches for the height in both the controller and the directive. The reason your getting that error is probably because attrs.height no longer contains the height, you need to access it on the scope instead with $scope.height. Maybe I didn't understand your question. Is the nvd3 directive yours? Or do you have one controller, one nvd3 directive that you didn't create, and another directive that you've created that will modify the height?

geekchic Over a year ago

Yup exactly. I have my own controller, my own directive that modifies the height and of course the angularjs nvd3 directives that I haven't touched.

Anders Ekdahl Over a year ago

Looking at the code for the nvd3-line-plus-bar-chart directive (github.com/cmaurer/angularjs-nvd3-directives/blob/master/src/…) it doesn't seem that it listens to changes to the height attribute. So you can change the value of varyingHeight, but the directive won't react and update the height. Your best bet is either to modify the source for the directive to add a watch for height, or to create a wrapper directive which recreates nvd3-line-plus-bar-chart when the height changes.

geekchic Over a year ago

Oh yes! I just put in this bit of code scope.$watch('height',function(height) {return scope.d3Call( scope.data, scope.chart );}); which worked perfectly when I used a function like this var h = 200; setInterval(function(){$scope.$apply(function(){ h = h + 50; $scope.varyingHeight = h; })}, 10000); in the controller. But this passing of variable height is what has me stuck. (Sorry about the awful formatting)

|

User4567 · Accepted Answer · 2014-06-11 09:55:52Z

0

I also faced this issue, I resolved it by passing the height as attribute to the directive

My sample directive

App.directive('aBc',function () {
return {
    restrict : 'AE',
    scope : {
        gridHeight : '@'
    },
    template : '<div style= "height : {{gridHeight}}px" >'
        +'<p>sdtyhdrtydrt--  {{gridHeight}} </p>'
        + '</div>'
};

});

pass the height through directive tag

directly you can pass the height

<div a-bc grid-height="200"></div>
<div a-bc grid-height="500"></div>
<div a-bc grid-height="1000"></div>

or you can set it from your controller

<div a-bc grid-height="someHeight"></div>

initialize someHeight in controller like

$scope.someHeight = 500;

answered Jun 11, 2014 at 9:55

User4567

1,0251 gold badge13 silver badges27 bronze badges

Collectives™ on Stack Overflow

Passing variable from directive to controller in AngularJS

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related