AngularJS点击按钮局部刷新Div问题：$http请求后更新#dashBoardContents的li出错排查

我来帮你排查下可能的问题点，毕竟局部更新页面元素是AngularJS里很常见的需求，咱们一步步来：

1. 没有正确绑定数据到视图 #

AngularJS是数据驱动视图的，如果你在$http请求成功后没有更新对应的作用域变量，视图自然不会有变化。比如你得在保存按钮的点击方法里，把请求返回的新数据赋值给绑定到视图的变量，同时更新加载状态。

举个正确的示例代码：

$scope.saveData = function(formData) {
  $http.post('/api/save', formData)
    .then(function(response) {
      // 请求成功后重新拉取最新的仪表盘数据
      return $http.get('/api/dashboard');
    })
    .then(function(dataRes) {
      // 更新绑定到视图的数组变量
      $scope.dashBoardItems = dataRes.data;
      // 更新加载状态，让加载提示隐藏
      $scope.dashBoardDataLoaded = true;
    })
    .catch(function(err) {
      console.error('请求出错啦:', err);
    });
};

2. 没有用ng-repeat动态渲染li元素 #

如果你的li是手动写死的静态标签，而不是用ng-repeat绑定数组，那就算更新了数据，视图也不会自动刷新。你的视图结构应该改成这样：

<div class="modified-list block-list col-sm-12" id="dashBoardContents" ng-init="getDashBoardDatatoPopulate()">
  <p class="text-center" ng-hide="dashBoardDataLoaded">加载中...</p>
  <ul>
    <!-- 用ng-repeat绑定数组，数据更新时li会自动同步 -->
    <li ng-repeat="item in dashBoardItems track by item.id">{{item.title}}</li>
  </ul>
</div>

加上track by item.id还能避免重复渲染的问题，提升页面性能。

3. 保存按钮的事件绑定方式错误 #

确保你的保存按钮是用Angular的ng-click绑定方法，而不是原生的onclick，否则操作不会触发Angular的上下文，变量更新后视图也不会同步：

<button type="button" ng-click="saveData(formData)">保存</button>

4. 可能存在作用域继承问题 #

如果保存按钮所在的表单在子作用域里（比如嵌套了ng-controller或者用了ng-include），子作用域的变量不会自动同步到父作用域。这时候建议用对象属性来绑定数据（避免作用域继承导致的变量遮蔽）：

// 控制器里初始化一个对象
$scope.dashboard = {
  items: [],
  dataLoaded: false
};

// 请求成功后更新对象的属性
$scope.dashboard.items = dataRes.data;
$scope.dashboard.dataLoaded = true;

视图里对应改成：

<p class="text-center" ng-hide="dashboard.dataLoaded">加载中...</p>
<li ng-repeat="item in dashboard.items track by item.id">{{item.title}}</li>

5. 特殊场景下没触发脏检查 #

虽然$http回调默认会触发Angular的脏检查，但如果你的回调里嵌套了非Angular的异步操作（比如原生setTimeout），就得手动调用$scope.$apply()来通知视图更新：

$scope.saveData = function(formData) {
  $http.post('/api/save', formData)
    .then(function(response) {
      // 比如这里用了原生定时器
      setTimeout(function() {
        $scope.$apply(function() {
          $scope.dashBoardItems = response.data.updatedItems;
          $scope.dashBoardDataLoaded = true;
        });
      }, 1000);
    });
};

不过一般$http的回调不需要这一步，除非你嵌套了其他第三方异步逻辑。

你可以对照这几点检查自己的代码，大概率是数据绑定或者事件绑定的问题~

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