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>

现在，我的控制器：

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根本没有动作，我仍然有相同的评论。为什么这样，控制台日志显示来自ajax调用的正确数据......任何人都可以帮忙吗？

Answer 1

当你有chartsData = data时，你所做的就是改变局部变量chartsData指向的对象。这不会更改视图绑定的实际属性，即通过chartsData访问的控制器实例上的this.chartsData属性。

您需要设置this.chartsData = data才能使其正常工作，并且可以大大简化您的代码，以移除多余的$timeout和$scope.$apply()来电。

Answer 2

在分配到loadChartsEvent属性时尝试更新this以使用chartsData关键字，并在0功能中添加timeout的超时值要将您的调用移动到堆栈的末尾，您的代码将变为如下：

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

ajax调用后ngRepeat没有更新

2 个答案: