AngularJS中获取URL参数elemId并添加至按钮onClick属性

Got it, let's fix those buttons so they dynamically use the elemId from the URL instead of the hardcoded placeholder. Here's how to do it properly in AngularJS:

Step 1: Update the Template to Use Dynamic Values #

First, modify your histogram template to bind the elemId from your controller, and use Angular's directives instead of raw onclick for better framework integration:

<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> 
  <!-- Use ng-href for anchors to ensure proper value interpolation -->
  <a class="btn" id="1day" ng-href="#!/histogram/{{ $ctrl.elemId }}/1">1 day</a> 
  <!-- Use ng-click to trigger controller navigation logic -->
  <button id="3days" ng-click="$ctrl.setTimespan(3)">3 days</button> 
  <button id="7days" ng-click="$ctrl.setTimespan(7)">7 days</button> 
  <button id="all" ng-click="$ctrl.setTimespan(10)">10 days</button> 
</div> 
<div id="chart-container"> 
  <canvas id="hist"></canvas> 
</div>

Step 2: Update the Controller to Handle Navigation & Fix Issues #

Next, modify your controller to inject the $location service (for proper routing) and add a method to handle timespan changes. Also fix a couple of small bugs in the original code:

'use strict'; 

angular.module('histogram', []).component('histogram', { 
  templateUrl: 'histogram/histogram.template.html', 
  controller: ['$routeParams', '$http', '$location', function histogramController($routeParams, $http, $location) { 
    this.elemId = $routeParams.elemId; 

    // Fix: Assign days first before logging to avoid undefined
    if ($routeParams.days != null) { 
      this.days = $routeParams.days;
      console.log(this.days); 
    } else { 
      this.days = 3; 
    } 

    this.pageTitle = this.elemId; 
    this.natalie = 1; 
    this.TT0101 = ""; 

    // Method to navigate with dynamic elemId and selected timespan
    this.setTimespan = function(days) {
      $location.path(`/histogram/${this.elemId}/${days}`);
    };

    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; 

        // Fix: Loop through data records, not the elemId string
        for (let i = 0; i < respdata.length; i++) { 
          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" } 
              }] 
            } 
          } 
        }); 
      }); 
  }] 
});

Key Fixes & Explanations: #

• Dynamic Routing: Used ng-href for the anchor tag (it properly interpolates {{ $ctrl.elemId }}) and ng-click with a controller method for buttons (uses Angular's $location service instead of raw onclick for consistent routing behavior).
• Console Log Fix: Moved console.log(this.days) after assigning the value so it logs the correct number instead of undefined.
• Loop Correction: Changed the loop from for (let i in self.elemId) to for (let i = 0; i < respdata.length; i++) — since self.elemId is a string (like "PT0104"), the original loop was iterating over each character instead of your data records.

Now when you click any of the timespan buttons, they'll correctly use the current elemId from the URL and navigate to the right route with the selected days parameter.

内容的提问来源于stack exchange，提问作者George Salukvadze