AngularJS - call listener of directive on click and pass data to it

Question

So, I was working with directives in AngularJS. What I want to achieve is that call the listener of the directive on the click of a button and pass it some data from the controller.

Here's my directive (example)

app.directive('graphVisualization', function() {
    var containerid = document.getElementById('left-graph-container');
    return {
        restrict: 'A',
        scope: {
          data: '=',
          val: '=',
        },
        link: function(scope, element, attrs) {
            scope.$watch('data', function(newVal, oldVal) {
                //listener code
            })
        }
    }

Here's my HTML

<div graph-visualization data="graphdata" val="stability">
</div>
<div>
    <input type="button" value="Call" ng-click="setData(6)" />
</div>

And here's my controller

app.controller('MainCtrl', ['$scope', function() {
    $scope.graphdata = ['time1', 'time2', 'time3'];
    $scope.setData() = function(val) {
        $scope.data = val;
        //now call the directive's listener code i.e. 'link' function and pass it '$scope.data'
    }
}])

So, I need to pass $scope.data from the controller to the directive and then run the code of the link function using that data. What I'm doing in the listener code is rendering a graph using D3 and I want to re-render that graph using the data sent each time I click the button. How do I go about this?

Dmitri Algazin · Accepted Answer · 2015-05-21 09:17:39Z

2

you are passing data="graphdata", why not data="data" ?

from my experience with Angular I found that using child variables are more effective working with directives, neither with direct variables

not:

$scope.data = val;

but:

$scope.state = {};

$scope.setData() = function(val) {
    $scope.state.data = val;
}

and pass state.data in html:

<div graph-visualization data="state.data" val="stability"></div>

you are not replacing instance of whole variable $scope.data, but just updating it properties, so watch in directive on 'data' will refer to the same instance.

You got my idea :)

answered May 21, 2015 at 9:17

Dmitri Algazin

3,4541 gold badge33 silver badges32 bronze badges

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

4 Comments

Tarun Dugar Over a year ago

The graphdata is different from the data I want to send. I just want to send it another data which has no relation to graphdata.

Dmitri Algazin Over a year ago

add more variables in directive scope and pass whatever you need

Tarun Dugar Over a year ago

how? I can pass the variables once but how do I execute the listener code when one of them changes?

Dmitri Algazin Over a year ago

what about watching a group of variables in directive? stackoverflow.com/questions/11952579/…

Collectives™ on Stack Overflow

AngularJS - call listener of directive on click and pass data to it

Here's my directive (example)

Here's my HTML

And here's my controller

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Here's my directive (example)

Here's my HTML

And here's my controller

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related