javascript - ngRepeat 在 ajax 调用后不更新

Question

这是我的部分观点:

<div class="chartspanel">
    <div ng-repeat="(key, chartData) in main.chartsData" class="chart-box">
        <div class="ibox">
            <div class="ibox-title">
                <h3>{{key}}</h3>
            </div>
            <div class="ibox-content" chart="chartData" chart-name="key"></div>
        </div>
    </div>
</div>

现在，我的 Controller :

class DashboardCtrl {
  constructor ($scope, $timeout, $sce, $rootScope, ChartService) {
    "ngInject";

    this.$sce = $sce;
    this.$scope = $scope;
    this.$rootScope = $rootScope;
    this.$timeout = $timeout;
    this.chartsData = null;
    this.chartService = ChartService;

    this.loadChartsEvent(this.$scope, this.$timeout, this.chartsData);
  }

  loadChartsEvent (scope, timeout, chartsData) {
      this.$rootScope.$on('loadCharts', (event, data) => {
          timeout(() => {
              scope.$apply(() => {
                  chartsData = data;
                  console.log(chartsData);
              });
          });
      });
  }
}

使用 $brodcast 从指令中检索数据，这部分工作正常，但在我尝试更新 chartsData 之后在我看来 ng-repeat 根本没有作用，我仍然有相同的评论 <!-- ngRepeat: (key, chartData) in main.chartsData --> .为什么会这样，控制台日志显示来自 ajax 调用的正确数据...有人可以帮忙吗？

Answer 1

当您有 chartsData = data 时，您所做的就是更改局部变量 chartsData 指向的对象。这不会更改 View 绑定(bind)到的实际属性，即 Controller 实例上的 chartsData 属性，可通过 this.chartsData 访问。

您确实需要设置 this.chartsData = data 才能正常工作，并且您的代码可以大大简化以删除多余的 $timeout 和 $ scope.$apply() 调用。