时间戳

首页 > 解决方案 > 获取 URL 参数 elemId 并将其添加到按钮 onClick 属性中

javascript - 获取 URL 参数 elemId 并将其添加到按钮 onClick 属性中

问题描述

我histogram在 AngularJS 中有一个组件（称为 ），它使用 ChartJS 显示数据图表。

它由另一个组件（称为cryostat）使用以下代码调用：

<div id="outer_pressure">Outer pressure ABS:<br/><a href="#!/histogram/PT0104"><span class="value">{{ $ctrl.PT0104[0].Mnish | number: 2 }} bar</span></a><br/>Outer pressure Diff:<br/><a href="#!/histogram/PT0105"><span class="value">{{ $ctrl.PT0105[0].Mnish | number: 2 }} mbar</span></a></div>

默认情况下，它使用elemId（在此示例中PT0104）从数据库中调用此元素的数据并加载最近 3 天的数据。

我的网址格式如下：http://server/np04-slow-control/app/#!/histogram/PT0104/3

我想要做的是在histogram组件页面上有按钮，允许在图表中加载不同时间跨度的数据（最后一天、最后 3 天、最后 7 天等）

UPDATE 根据建议更正了组件代码

更新 2 重新表述了问题以尝试使其更清楚。

我的 HTML 模板代码如下：

<style type="text/css">
     #chart-container {
         width: 80%;
         height: 100%;
     }
</style>

<div id="timespan" style="position: relative; left: 5%; top: 10%;">
    <span>History for:</span>

    <a class="btn" id="1day" href="#!/histogram/elemId/1">1 day</a>
    <button id="3days" onclick="#!/histogram/elemId/3">3 days</button>
    <button id="7days" onclick="#!/histogram/elemId/7">7 days</button>
    <button id="all"  onclick="#!/histogram/elemId/10">10 days</button>
</div>
<div id="chart-container">
     <canvas id="hist"></canvas>
</div>

控制器

'use strict';
angular.module('histogram', []).component('histogram', {
    templateUrl: 'histogram/histogram.template.html',
    controller: ['$routeParams', '$http',
        function histogramController($routeParams, $http) {
            this.elemId = $routeParams.elemId;
            if ($routeParams.days != null) {
                console.log(this.days);
                this.days = $routeParams.days;
            } else {
                this.days = 3;
            }
            this.pageTitle = this.elemId;
            this.natalie = 1;
            this.TT0101 = "";
            let self = this;
            let labels = [];
            let values = [];
            $http.get("php-db-conn/histogram.conn.php?elemId=" + this.elemId + "&days=" + this.days).then(function (response) {
            let title = self.elemId;
            let respdata = response.data.records;
            for (let i in self.elemId) {
                    labels.push(moment((respdata[i].TimeStamp), "DD-MMM-YYYY hh.mm.ss.SSSSSSSSS A"));
                    values.push(respdata[i].ExactValue);
                }
                let chartdata = {
                    labels: labels,
                    datasets: [
                        {
                            label: title,
                            tension: 0,
                            pointRadius: 1,
                            backgroundColor: 'rgba(200, 200, 200, 0.001)',
                            borderWidth: 1,
                            borderColor: 'rgba(200, 200, 200, 0.75)',
                            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                            hoverBorderColor: 'rgba(200, 200, 200, 1)',
                            data: values
                        }
                    ]
                };
                let ctx = $('#hist');

                let barGraph = new Chart(ctx, {
                    type: 'line',
                    data: chartdata,
                    options: {
                        legend: {
                            labels: {
                                fontColor: "white",
                                fontSize: 18
                            }

                        },
                        scales: {
                            xAxes: [{
                                type: "time",
                                time: {
                                    tooltipFormat: "DD/MM/YYYY HH:mm:ss",
                                    displayFormats: {
                                        millisecond: "HH:mm:ss.SSS",
                                        second: "HH:mm:ss",
                                        minute: "HH:mm",
                                        hour: "DD/MM HH:mm",
                                        day: "DD/MM/YYYY",
                                        week: "DD/MM",
                                        month: "MM YYYY",
                                        year: "YYYY"
                                    }
                                },
                                ticks: {

                                    fontColor: "white"
                                }
                            }],
                            yAxes: [{
                                ticks: {
                                    fontColor: "white"
                                }

                            }]
                        }
                    }
                });
                console.log(labels);
            });
        }
    ]
});

我想要的是获取 SPAREAI 并将其附加到 onclick url。我在代码中用 elemId 标记了 id

标签： javascripthtmlangularjs

解决方案

看起来您在代码中重用了我们代码中的 elemId 变量：

在这里，您从 routeParams 获得 elemId

    this.elemId = $routeParams.elemId;

在这里，您将“this”分配给 self 并重新分配 elemId：

    let self = this;

   let labels = [];
        let values = [];
        $http.get().then(function (response) {

        let title = self.elemId;
        self.elemId = response.data.records;   **<---- This is the problem**

现在，当您尝试访问 elemIdin 模板时，它不会指向“$routeParams.elemId”，而是指向 response.data.records。在 JS 中“=”运算符不会深度复制对象。在您的情况下，“self”和“this”都指向相同的对象引用。

希望有帮助！

推荐阅读