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

Question

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

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

我正在为模态使用 templateURL，并使用一个控制器来处理模态功能。

由于我对 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 构建的模态控制器：

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

        });

    };
});

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

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

Answer 1

根据我的回答，我假设模式已正确打开。

我们需要有 2 个控制器：

1. 按住 $modal 服务并控制打开模式（我们将使用您的重命名）

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

    };
});

1. 当模态 DOM 打开时控制其的控制器

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

而模态框内的画布是使用 $scope 的变量定义的

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

P.S - 请注意我在哪里“打开”了我为它声明一个控制器的模态

Answer 2

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

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

我在上面做了类似的事情。