javascript - 需要帮助将 Chart.js 图表添加到模态窗口(我正在使用 AngularJS)

Question

我对大多数与网络开发相关的事情都是新手。过去几周我一直在使用 AngularJS 构建一个原型(prototype)网站。由于我对 Angular 工作原理的理解存在缺陷，我重定向到某些网页，因此破坏了应用程序；当时这并不重要，因为它只是一个快速原型(prototype)来记录一些想法。
然而现在，我想构建一些更现实的东西，因此应用程序必须在一页上运行。我决定实现模式来在应用程序中显示数据，而不是在原始原型(prototype)中使用重定向。到目前为止，一切进展顺利，我可以单击列表中的某个项目，然后会打开一个模式窗口，并显示与所选项目相关的正确数据(图形除外)。

我不确定应该如何在模型中实现图形，或者更准确地说，我不确定如何选择 Canvas 元素以将图形添加到其中。

我使用模态的 templateURL 和 Controller 来处理模态功能。

由于我对 javascript 的了解充其量是不可靠的，所以我今天大部分时间都在学习 Javascript 和 JQuery 的基础知识(我已经使用 Angular 几个星期了)。

在我的静态页面上，我使用 Chart.js 文档中描述的图表。

<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>

当它添加到包含 <canvas> 的 html 页面时，效果很好。元素，但如果我将其包含在模态模板中，它就不起作用。这是我的模态模板(没有 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>

这是使用 Angular 构建的模态 Controller :

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());

        });

    };
});

我可以在模态 Controller 中添加图表和数据吗？或者也许使用指令？最终，当用户选择打开模式窗口的项目时，图形将显示从数据库查询的数据。

我一直在考虑使用 javascript 和 JQuery 添加图表和数据，但它们要求元素在执行时在页面上可用，但这里的情况并非如此。我尝试将 javascript 添加到 templateURL 但也不起作用。另外，我想我应该能够以 Angular 的方式做到这一点，有人能建议这如何可能吗？

Answer 1

为此图表创建指令符合您的最佳利益，这样您就可以在任何您喜欢的地方使用它。

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

我做了类似上面的事情。