AngularJS 1.6查询字符串值无法即时更新问题求助

我来帮你拆解这个AngularJS 1.6的问题，其实核心原因和AngularJS的变化检测机制直接相关：

为什么首次修改参数后页面不更新？ #

当你手动修改地址栏的number参数并回车时，虽然浏览器的hash已经发生变化，但AngularJS在file://协议下不会自动触发$scope的**$digest循环**——这是AngularJS同步数据到视图的核心机制。你的初始代码只在控制器初始化时读取了一次查询参数，后续地址栏的手动修改没有被AngularJS的自动检测捕获到，所以视图里的{{ inputNumber }}自然不会更新。

而当你点击地址栏不修改直接回车时，相当于触发了一次hash的“伪变化”，AngularJS的$location服务检测到这次变化后，会自动触发$digest循环，这时候初始化的代码会重新执行，读取到新的参数值并更新视图。

两种可行的解决办法 #

方法1：监听$locationChangeSuccess事件 #

这个事件会在地址栏的hash（包括查询参数）发生变化时触发，我们可以在事件回调里重新读取参数并更新$scope：

修改你的application.js控制器代码：

(function() {
var app = angular.module("myApp", []);
app.controller("mainCtrl", function ($scope, $http, $location) {
  // 封装读取参数的通用方法
  var updateInputNumber = function() {
    if ($location.search().hasOwnProperty('number')) {
      $scope.inputNumber = $location.search()['number'];
    } else {
      $scope.inputNumber = "";
    }
  };

  // 页面初始化时先执行一次
  updateInputNumber();

  // 监听地址栏变化事件
  $scope.$on('$locationChangeSuccess', function() {
    updateInputNumber();
  });
});
})();

方法2：使用$watch监听查询参数变化 #

通过$watch监听$location.search()的变化，一旦参数更新就同步到$scope：

(function() {
var app = angular.module("myApp", []);
app.controller("mainCtrl", function ($scope, $http, $location) {
  $scope.inputNumber = "";

  // 深度监听查询参数对象的变化
  $scope.$watch(function() {
    return $location.search();
  }, function(newSearchParams) {
    if (newSearchParams.hasOwnProperty('number')) {
      $scope.inputNumber = newSearchParams['number'];
    } else {
      $scope.inputNumber = "";
    }
  }, true); // 第三个参数设为true，开启深度监听对象变化
});
})();

这两种方法都能让你手动修改地址栏参数后，页面实时更新到最新的number值。

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