需要帮助将Chart.js图表​​添加到模态窗口（我正在使用AngularJS）

Question

I'm new to most things web development related. I've been building a prototype website for the past couple of weeks using AngularJS. Due to my flawed understanding of how angular works I was redirecting to certain webpages and so breaking the app; at the time this didn't matter as it was just a quick prototype to get some ideas down.
Now however, I want to build something more realistic, and so the app must run on the one page. Instead of the redirects I was using in the original prototype I've decided to implement modals to display the data within the app. All has been going well so far, I can click on an item in the list and a modal window opens and displays the correct data as related to the item that was selected, except that is, for the graphs.

I'm not sure how I should implement the graphs in the model, or to be more accurate, how I can select the canvas element to add the graph to it.

I'm using a templateURL for the modal, and a controller to handle the modal functionality.

Since my knowledge of javascript is dodgy at best, I've spend most of today going over the basics of Javascript and JQuery (I've been working with Angular for a couple of weeks now).

On my static pages I use the charts as described in the Chart.js documentation.

<script>
                        var data = {
                            labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                            datasets: [
                                {
                                    label: "My First dataset",
                                    fillColor: "rgba(220,220,220,0.2)",
                                    strokeColor: "rgba(220,220,220,1)",
                                    pointColor: "rgba(220,220,220,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(220,220,220,1)",
                                    data: [65, 59, 80, 81, 56, 55, 40, 80, 81, 56, 55, 40]
                                },
                                {
                                    label: "My Second dataset",
                                    fillColor: "rgba(151,187,205,0.2)",
                                    strokeColor: "rgba(151,187,205,1)",
                                    pointColor: "rgba(151,187,205,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(151,187,205,1)",
                                    data: [28, 48, 40, 19, 86, 27, 90, 86, 27, 90, 90, 2]
                                }
                            ]

                        }
                        var ctx = document.getElementById("myChart").getContext("2d");
                        var options = {responsive: true};
                        var myNewChart = new Chart(ctx).Line(data, options); 
</script>

This works fine when it's added to a html page that contains the <canvas> element, but it doesn't work if I include it in the modal template. Here's my modal template (without the javascript):

<div id="deviceModal">
    <div class="modal-header">
        <div class="divBar" >
            <div class="{{device.status}}"><img src="{{(device.type == 'type1') ? 'img/type1white.png' : 'img/type2white.png'}}"> </div>
            <div class="title">
                <h3>{{device.id}}</h3><br />

            </div>
            <div class="{{device.status}}Text"><b>STATUS: {{device.status}}</b> - {{device.action}}</div>
        </div> 
        <div class="divBar">
            <table>
                <tr><td class="dataLabel">Location: </td><td class="dataContent">{{device.location}}</td></tr>
                <tr><td class="dataLabel">Running Time: </td><td class="dataContent">3 days</td></tr>
                <tr><td class="dataLabel">Number of Starts: </td><td class="dataContent">60</td></tr>
            </table>
        </div>
        <div class="divBar deviceStatistics">
            <canvas id="myChart" width="400" height="200"></canvas>
        </div>
    </div>
</div>

And here's the modal controller built with Angular:

app.controller('modalController', function ($scope, $modal) {

    $scope.open = function (device) {
        $scope.device = device;
        var modalInstance = $modal.open({
            templateUrl: 'add_modal.html',
            windowClass: 'app-modal-window',
            scope: $scope
        });

        console.log('modal opened');

        modalInstance.result.then(function () {

            console.log('you can check user selections here');

        }, function () {

            console.log('Modal dismissed at: ' + new Date());

        });

    };
});

Is it possible for me to add the chart and data in the Modal controller? or by using a directive maybe? Eventually the graphs will be displaying data that's queried from a database when the user selects an item that opens the modal window.

I've been looking at using javascript and JQuery to add the chart and data, but they require the element to be available on the page at the time of execution and that's not the case here. I've tried adding javascript to the templateURL but that doesn't work either. Also, I'd imagine I should be able to do this the Angular way, can anyone suggest how that might be possible?

Answer 1

With my answer I assume the modal is open correctly.

We need to have 2 controllers:

1. Hold the $modal service and control on opening the modal (We'll use your with rename)

 app.controller('myCtrl', function ($scope, $modal) { $scope.open = function (device) { $scope.device = device; var modalInstance = $modal.open({ templateUrl: 'add_modal.html', controller: 'myCtrl' windowClass: 'app-modal-window', }); modalInstance.result.then(function () { console.log('you can check user selections here'); }, function () { console.log('Modal dismissed at: ' + new Date()); }); }; }); 

2. A controller who control's the modal DOM when it opens

 app.controller('modalCtrl', function($scope) { $scope.myData = [/*your data array*/]; $scope.myLabels = [/*your labels array*/]; }); 

And your canvas whitin the modal is defined using the $scope's vars

<canvas class="chart chart-line" data="myData" labels="myLabels"></canvas>

PS - please pay attention to where I 'open' the modal I declare a controller for it

Answer 2

it will be in your best interest to create a directive for this chart, and that way you can also use it anywhere you like.

https://github.com/miganga/angularMeetupTwo/tree/master/app

I did something similar above.