Cela fait partie de mon avis:

<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>

Maintenant, mon contrôleur:

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);
              });
          });
      });
  }
}

Les données sont extraites de la directive à l'aide de $ brodcast, cette partie fonctionne bien, mais après avoir essayé de mettre à jour chartsData à mon avis, ng-repeat n'agit pas du tout, j'ai toujours le même commentaire {{X1} }. Pourquoi est-ce que le journal de la console affiche les données appropriées de l'appel ajax ... Quelqu'un peut-il aider?

1
Lukas 17 janv. 2017 à 01:50

2 réponses

Meilleure réponse

Lorsque vous avez chartsData = data, tout ce que vous faites est de changer l'objet vers lequel pointe la variable locale chartsData. Cela ne change pas la propriété réelle à laquelle la vue est liée, qui est la propriété chartsData sur l'instance de contrôleur, accessible via this.chartsData.

Vous devez définir this.chartsData = data pour que cela fonctionne, et votre code peut être considérablement simplifié pour supprimer les appels redondants $timeout et $scope.$apply().

2
GregL 16 janv. 2017 à 23:11

Essayez de mettre à jour votre loadChartsEvent pour utiliser le mot clé this lors de l'attribution à la propriété chartsData, et ajoutez une valeur de délai d'expiration de 0 dans votre fonction timeout pour déplacer votre appel à la fin de la pile, votre code deviendra comme ceci:

loadChartsEvent(scope, timeout, chartsData) {
  this.$rootScope.$on('loadCharts', (event, data) => {
      timeout(() => {
          scope.$apply(() => {
              this.chartsData = data;
              console.log(chartsData);
          });
      }, 0);
  });
}
1
Tha'er M. Al-Ajlouni 16 janv. 2017 à 23:10