AngularJS中更新scope属性后视图未更新的问题求助

我来帮你排查下这个问题，你遇到的视图不更新其实主要有两个关键问题，咱们一步步来解决：

1. HTML中ng-show的语法错误 #

AngularJS的ng-show指令本身会直接解析内部的表达式，不需要额外加插值语法{{}}。你原来的写法ng-show="{{ loading === true }}"会把表达式转换成字符串，导致Angular无法正确监听loading的变化，自然不会更新视图。

修正后的HTML应该写成：

<div ng-show="loading">
  <i class="fa fa-spinner fa-w-16 fa-spin fa-lg"></i>
</div>
<div ng-hide="loading">
  <!-- 加载完成后的内容 -->
</div>

（或者用ng-show="!loading"替代第二个div的ng-hide，效果是一样的）

2. 失败回调中$timeout的调用错误 #

你在失败回调里写的$timeout(getTasks(), 5000)存在一个问题：这里你直接执行了getTasks()函数，会导致请求立即重试，而不是等待5秒后再执行。正确的写法应该是传递函数引用，不要加括号：

$timeout(getTasks, 5000);

修正后的完整代码 #

JavaScript部分：

$scope.loading = true;
function getTasks() {
  $http.get(URL)
    .then(function (response) {
      // 成功获取数据
      $scope.tasks = response.data;
    }, function () {
      // 请求失败处理
      $scope.errorMessage = "Failed to fetch tasks";
      // 5秒后重试请求（注意这里传的是函数引用）
      $timeout(getTasks, 5000);
    })
    .finally(function () {
      // 无论成功失败，都关闭加载状态
      $scope.loading = false;
    });
}

HTML部分：

<div ng-show="loading">
  <i class="fa fa-spinner fa-w-16 fa-spin fa-lg"></i>
</div>
<div ng-hide="loading">
  <!-- 这里展示加载完成后的任务内容 -->
</div>

其实你之前尝试的$timeout包裹或者$scope.$apply()都是在绕开根本问题，只要修正上面两个点，视图就能正常响应loading的变化了。

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