Angular.js问题：setTimeout无法更新$scope及ng-show引用data.show方法

我来帮你搞定这两个问题，其实都是AngularJS数据绑定和digest循环的基础点，一步步来~

1. ng-show如何引用$scope中的show变量 #

首先你需要在控制器里初始化$scope.show变量，Angular会自动把这个变量绑定到视图上：

• 在控制器中设置初始值：$scope.show = false;（这样页面加载时默认隐藏表格，显示loading）
• HTML里通过ng-show指令直接引用这个变量：
  • loading元素用ng-show="!show"（当show为false时显示loading）
  • 表格用ng-show="show"（当show为true时显示表格）

2. 解决setTimeout无法更新$scope的问题 #

你已经知道setTimeout和$timeout的区别，那直接用Angular原生的$timeout服务就可以完美解决视图不更新的问题——它会自动触发Angular的digest循环，让视图同步$scope的变化。

完整代码示例 #

控制器代码

angular.module('myApp', [])
.controller('MyController', function($scope, $timeout) {
  // 初始化：默认隐藏表格，显示loading
  $scope.show = false;

  // 模拟数据加载逻辑（替换成你实际的异步加载代码，比如AJAX请求）
  function loadData() {
    console.log('正在加载数据...');
    // 数据加载完成后，等待3000ms再切换状态
    $timeout(function() {
      $scope.show = true; // 更新变量，自动触发视图更新
    }, 3000); // 后续要缩短时长，直接改这个数字就行
  }

  // 页面初始化时触发数据加载
  loadData();
});

HTML代码

<div ng-app="myApp" ng-controller="MyController">
  <!-- Loading动画：未加载完成时显示 -->
  <div ng-show="!show">
    <img src="loading.gif" alt="加载中..." />
  </div>

  <!-- 数据表格：加载完成并等待后显示 -->
  <table ng-show="show" border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
      </tr>
    </tbody>
  </table>
</div>

如果你一定要用setTimeout（不推荐） #

如果因为某些原因必须用原生setTimeout，那需要手动触发digest循环，告诉Angular去检查$scope的变化：

setTimeout(function() {
  // 用$apply包裹变量修改逻辑，避免digest冲突
  $scope.$apply(function() {
    $scope.show = true;
  });
}, 3000);

这样就能保证视图会同步更新啦，后续缩短等待时长只需要修改定时器的延迟参数即可~

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