0

Here is my situation: I'd like to draw two representations of a set of data, a line chart, and a pie chart. The pie chart can reflect the line chart, but the data has to be processed into a pie chart format first.

My controller has the lineData and pieData

My line chart directive draws the line chart and has a button on it to add data. It also watches the the data and updates accordingly. The data is passed to it with 2-way binding so whenever I press this button the data on the controller is updated as well.

What I'd like to do is set a watch on the controller. When it sees that the data has been updated by a directive, it should process/change the data for the pie chart. The pie chart should update automatically like the line chart. The pie chart updating is straightforward.

The issue is I am creating a lot of these line/pie pairs and I'm not sure how to set the watch statement on the controller. If I have a data set of [A,B,C] (3 pairs of graphs) I'd have to loop through and attach a watch statement to watch each of A,B, and C. (If I set the watch statement on the entire array, is there a way for it to know which of A,B, or C changed?) This seems kind of messy though so I just wanted a second opinion and how I should do this or if the entire process can be done in a more simple way.

Currently the changes to the data happens within the line chart directive, propagate up into the controller where it is processed, and then transmitted into the pie chart directive.

user2483724
  • 2,089
  • 5
  • 27
  • 43
  • Both the accepted and the most voted for answer (as of now) of [AngularJS: Communication between directives](http://stackoverflow.com/questions/18780402/angularjs-communication-between-directives) might be helpful to you. Basically, you could either use a service and observer pattern or Angular's built-in event system to communicate across directives and trigger a re-draw. – Marc Kline May 12 '14 at 22:34
  • Can you provide either a [Plunker](http://plnkr.co/) or some pseudocode with a view of how the relevant parts of your app are structured, especially as far as how the controllers and directives are nested and where the `$watch`es are that you're considering? – Marc Kline May 13 '14 at 00:16
  • @MarcKline I actually have a current version working. It's more of an architectural question. Basically I have watches set up in a controller and 2 directives. The directives have watches to update themselves automatically, pretty basic. Not sure about the controller though. What's here now is that each instance of every pair of directives has it's own watcher on the controller which watches directiveA for changes and then propagates it to directiveB by changing some data on the controller. (which directiveB is watching) – user2483724 May 13 '14 at 16:26
  • 1
    It sounds like an excessive number of `$watch`es. If they're all watching the same values, you might be better off using a `$watch` in one place, with Angular events used to `$broadcast`/`$emit` then catch the events with `$on` in the other places. Or you might manage the data and directive intercommunication using a service. Both approaches are referenced in my original comment. We'd have to see more concrete details about your app (e.g. pseudocode samples of your directives, controllers, and HTML layout) to consider your use case more closely and make more specific recommendations. – Marc Kline May 13 '14 at 16:47
  • I would fire an event in the controller and have the directive listen for that to do a redraw – reptilicus Oct 23 '14 at 21:52

1 Answers1

0

As noted above:

It sounds like an excessive number of $watches. If they're all watching the same values, you might be better off using a $watch in one place, with Angular events used to $broadcast/$emit then catch the events with $on in the other places. Or you might manage the data and directive intercommunication using a service. Both approaches are referenced in my original comment. We'd have to see more concrete details about your app (e.g. pseudocode samples of your directives, controllers, and HTML layout) to consider your use case more closely and make more specific recommendations.

References

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265