Question

我对Web开发相关的大多数事情都是新手。过去几周我一直使用AngularJS构建一个原型网站。由于我对角度如何工作的错误理解，我正在重定向到某些网页，从而打破了应用程序;当时这无关紧要，因为它只是一个快速的原型，可以让一些想法失效然而，现在，我想构建更逼真的东西，因此应用程序必须在一个页面上运行。而不是我在原始原型中使用的重定向，我决定实现模式以在应用程序中显示数据。到目前为止一直进展顺利，我可以单击列表中的某个项目并打开一个模态窗口，并显示与所选项目相关的正确数据，但对于图形除外。

我不确定如何在模型中实现图形，或者更准确，我如何选择canvas元素来添加图形。

我正在使用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个控制器：

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

＆＃13;

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

＆＃13;

在打开时控制模态DOM的控制器

＆＃13;

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

＆＃13;

使用$ scope＆＃39; s vars

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

P.S - 请注意我打开的地方＆＃39;模态我为它声明了一个控制器

Answer 2

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

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

我做了类似的事情。

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

2 个答案:

我们需要2个控制器：

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

2 个答案:

我们需要2个控制器：

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