AngularJS：如何通过RouteProvider刷新路由视图的动态数据？

问题根源 #

• AngularJS默认会缓存通过templateUrl加载的模板，首次请求后不会再重新拉取，导致新数据对应的模板无法更新。
• 用jQuery的$("#my_div").load()直接操作DOM，Angular自身的变更检测机制无法感知到这种修改，所以视图不会同步更新。

解决方案 #

1. 打破模板缓存，强制重新请求 #

在路由配置中给templateUrl添加随机参数（比如时间戳），让Angular每次都去拉取最新的模板：

app.config(function($routeProvider) {
  $routeProvider
    .when("/order", {
      templateUrl: function() {
        // 加时间戳避免浏览器缓存模板
        return "order...?t=" + new Date().getTime();
      },
      controller: "theCtrl"
    });
});

2. 改用Angular原生方式传递数据（推荐） #

放弃直接用jQuery操作DOM的方式，用Angular的路由参数或共享服务来传递数据，让控制器主动获取并更新视图。

方式一：通过路由参数传递数据

修改路由配置，支持动态参数：

app.config(function($routeProvider) {
  $routeProvider
    .when("/order/:dataId", {
      templateUrl: "order...",
      controller: "theCtrl"
    });
});

模态框操作完成后，通过$location.path()跳转到带新参数的路由：

// 假设新数据的标识为newDataId
$location.path("/order/" + newDataId);

在控制器中监听路由参数变化，重新获取数据：

app.controller("theCtrl", function ($scope, $routeParams, $http) {
  // 封装获取数据的函数
  function fetchData(dataId) {
    $http.get("order...?data=" + dataId)
      .then(function(res) {
        $scope.orderData = res.data;
      });
  }

  // 首次加载获取数据
  fetchData($routeParams.dataId);

  // 路由参数变化时重新获取数据
  $scope.$on("$routeChangeSuccess", function() {
    fetchData($routeParams.dataId);
  });
});

方式二：用共享服务存储数据

创建一个共享服务来保存订单数据：

app.service("OrderDataService", function() {
  let currentData = null;

  return {
    setData: function(data) {
      currentData = data;
    },
    getData: function() {
      return currentData;
    }
  };
});

在模态框控制器中更新服务内的数据：

app.controller("ModalCtrl", function ($scope, OrderDataService, $route) {
  $scope.saveChanges = function(newData) {
    // 将新数据存入服务
    OrderDataService.setData(newData);
    // 关闭模态框
    $("#modal").modal("hide");
    // 刷新路由，触发控制器重新执行（可选）
    $route.reload();
  };
});

在theCtrl中监听服务数据变化，更新视图：

app.controller("theCtrl", function ($scope, OrderDataService) {
  // 首次获取数据
  $scope.orderData = OrderDataService.getData();

  // 监听服务内的数据变化
  $scope.$watch(function() {
    return OrderDataService.getData();
  }, function(newVal) {
    if (newVal) {
      $scope.orderData = newVal;
    }
  });
});

3. 若必须使用jQuery，手动触发Angular变更检测 #

如果一定要保留load操作，需要手动通知Angular更新视图：

$("#my_div").load("order...?data=...", function() {
  // 获取该DOM对应的Angular作用域
  const scope = angular.element("#my_div").scope();
  // 手动触发变更检测
  scope.$apply();
});

注意：这种方式违背Angular设计理念，容易引发未知问题，仅作为临时方案使用。

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