Copy div content to dynamically create a modal window:possible?

Question

In my application I am displaying graphs by using angular chart directives.

What I'd like to accomplish is to display a small version of the graphs in the main page and then, by pressing a button, display a bigger version of a specific graph inside of a popup window.

Graphs are populated at run time, once the small version of a graph is populated it would only be a matter of changing size and copy canvas code inside of the popup window, but I have no idea on how to accomplish that so I'm asking for help.

Here's my plunker "http://plnkr.co/edit/EajX7NqwHmu7oBVI4u8b"

Answer 1

You need a directive like:

app.directive('graph', [function() {
    return {
        restrict: 'A',
        scope: {
            x: '@',
            y: '@',
            width: '@',
            height: '@'
        },
        template: '' // Your code to draw the graph.
    };
}]);

In this way, you can reuse the directive in multiple place, by changing the parameters:

<div graph width="100" height="200"></div>
<div graph width="500" height="1000"></div>
......