Получите параметр URL elemId и добавьте его в атрибут onClick кнопки

Question

У меня есть компонент (называемый 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 дня.

Мой формат URL следующий: http://server/np04-slow-control/app/#!/histogram/PT0104/3

Я хочу, чтобы на странице компонента histogram были кнопки, которые позволят загружать данные в диаграмму за разное время (последний день, последние 3 дня, последние 7 дней и т. Д.)

ОБНОВЛЕНИЕ Исправлен код компонента в соответствии с предложением

ОБНОВЛЕНИЕ 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 и добавить его в URL-адрес клика.Я пометил id с elemId в коде

Answer 1

После тщательного исследования я наконец смог заставить его работать.

Контроллер Добавил следующую функцию в код контроллера: this.dayChanger = function(funcdays) { $window.location.href = "#!/histogram/" + this.elemId + "/" + funcdays; }

HTML-шаблон Изменены следующие кнопки:

<button id="3days" type="button" ng-click="$ctrl.dayChanger(3)">3 days</button>

Answer 2

Похоже, что вы повторно используете переменную elemId в нашем коде в своем коде:

Здесь вы получаете elemId из routeParams

    this.elemId = $routeParams.elemId;

Здесь вы назначаете "this" для себя и переназначаете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 оператор "=" не копирует объекты глубоко.В вашем случае «я» и «это» указывают на одну и ту же ссылку на объект.

Надеюсь, это поможет!