AngularJS实现点击修改URL参数并无刷新更新图表

我来帮你搞定这个无刷新切换周期的需求！咱们一步步修改代码，既能更新URL参数，又不用重载页面，还能自动刷新图表：

第一步：修改HTML结构 #

把原来依赖页面跳转的链接换成AngularJS的ng-click指令，同时去掉多余的隐藏输入框（咱们直接从URL参数获取值）：

<div ng-app="app">
  <div ng-controller="tickerchartsCtrl">
    <canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-options="options"></canvas>
    <!-- 用ng-click替代href，触发周期切换方法 -->
    <a ng-click="setPeriod('1m')">1m</a>
    <a ng-click="setPeriod('1w')">1w</a>
    <a ng-click="setPeriod('1d')">1d</a>
  </div>
</div>

第二步：重构AngularJS控制器 #

核心是用$location.search()修改URL参数（不刷新页面），同时封装数据加载逻辑，方便切换周期时重复调用：

var app = angular.module('tickercharts', ['chart.js']);
app.controller('tickerchartsCtrl', ['$scope', '$http', '$location', function($scope, $http, $location){
  // 从URL参数初始化当前的货币和周期，后端默认值兜底
  $scope.currency = $location.search().c || '{{ $currency }}';
  $scope.period = $location.search().p || '{{ $period }}';

  // 封装图表数据加载函数，避免重复代码
  var loadChartData = function() {
    var apiUrl = `${$location.protocol()}://${$location.host()}/api/gettickers?c=${$scope.currency}&p=${$scope.period}`;
    $http.get(apiUrl)
      .then(function(response) {
        var data = response.data;
        $scope.gettickeritems = data.gettickers;
        // 注意：这里要根据API返回的结构，把数据转换成图表需要的labels和data格式
        // 示例（根据你的实际数据调整）：
        // $scope.labels = data.timestamps;
        // $scope.data = [data.priceValues];
      })
      .catch(function(error) {
        console.log("No data found..", error);
      });
  };

  // 页面初始化时加载数据
  loadChartData();

  // 周期切换的核心方法
  $scope.setPeriod = function(newPeriod) {
    $scope.period = newPeriod;
    // 更新URL中的p参数，不会触发页面重载
    $location.search('p', newPeriod);
    // 重新加载对应周期的图表数据
    loadChartData();
  };
}]);

关键知识点说明 #

• $location.search('p', newPeriod)：这个方法会悄悄修改地址栏的p参数，完全不会触发页面刷新，完美解决你不想重载页面的需求。
• 封装loadChartData：把数据请求逻辑抽成函数，切换周期时直接调用就能刷新图表，代码更简洁易维护。
• 从URL参数初始化：这样用户直接访问带参数的URL（比如/t?c=BTC&p=1w）时，图表也能正确加载对应数据。
• 替换success/error：AngularJS 1.6+之后这两个方法已经被废弃，改用then/catch是更规范的写法。

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