AngularJS nvd3 Versand Chart Ereignis wird nicht $ onChanges()

Question

auslösen, wie ich angularjs nvd3 dispatch.elementMouseover tun bekommen $onChanges() in einer untergeordneten Komponente auszulösen

.

---

.

Eltern Component Controller (StatsComponent)

class StatsController { 

    constructor($q, PlayerService, PointService) { 
    'ngInject'; 
    this.$q = $q; 
    this.PlayerService = PlayerService; 
    this.PointService = PointService; 
    } 


    $onInit() { 

    const P_players = this.PlayerService.getAllPlayer(); 
    const P_points = this.PointService.getPointLeader(); 

    this.pointChartOptions = this.setChartOptions(); 

    this.$q.all([ P_players, P_points ]) 
     .then(payload => {    
     this.pointLeadersVM = this.getLeadersVM(payload[0], payload[1]); 
     this.selectedPointLeader = this.pointLeadersVM[0]; 
     this.pointData = this.getPointData(payload[1]); 
     this.setPointChartMouseOver(this.pointLeadersVM); 
     }); 
    } 



    setChartOptions() { 
    return { 
     chart: { 
     type: 'multiBarHorizontalChart', 
     height: 300, 
     x: function (d) { return d.label; }, 
     y: function (d) { return d.value; }, 
     duration: 500, 
     multibar: { 
      dispatch: { 
      elementMouseover: function (e) { /* see setPointChartMouseOver method */ } 
      } 
     }, 
     } 
    } 
    } 



    setPointChartMouseOver(pointLeaders) { 
    this.pointChartOptions.chart.multibar.dispatch.elementMouseover = function(e) { this.selectedPointLeader = pointLeaders[e.index]; }; 
    } 



    getLeadersVM(players, leaders) { 
    // get leaders vm code ... 
    } 



    getPointData(leaders) { 
    // chart data code ... 
    } 

} 

export default StatsController; 

.

---

.

geordnete Komponente HTML (StatsComponent)

<leader selectedleader="vm.selectedPointLeader"></leader> 
<nvd3 options="vm.pointChartOptions" data="vm.pointData"></nvd3> 

.

---

.

Kinder Komponente (LeaderComponent)

import controller from './leader.component.controller'; 
import template from './leader.component.html'; 
import './leader.component.styl'; 

const LeaderComponent = { 
    bindings: { 
    selectedleader: '<' 
    }, 
    template, 
    controller, 
    controllerAs: 'vm' 
} 

export default LeaderComponent; 

.

---

.

Child Component Controller (LeaderComponent)

class LeaderComponent { 

    $onChanges() { 
    console.log('from child component ', this.selectedleader); 
    } 
} 

export default LeaderComponent; 

Answer 1

OWWWW, es heraus !!!

Inject $scope und dann $scope.$apply() nennen. Muss auch die Pfeilfunktion verwenden.

.

---

.

Eltern Component Controller (StatsComponent)

class StatsController { 

    constructor($q, $scope, PlayerService, PointService) { 
    'ngInject'; 
    this.$q = $q; 
    this.$scope = $scope; 
    this.PlayerService = PlayerService; 
    this.PointService = PointService; 
    } 

    // this.$scope.$apply(fn) passing function arg into $apply() 

    setPointChartMouseOver(pointLeaders) { 
    this.pointChartOptions.chart.multibar.dispatch.elementMouseover = (e) => { 
     this.$scope.$apply(() => this.selectedPointLeader = pointLeaders[e.index]); 
    }; 
    } 


    // OR this.$scope.$apply() without passing function arg into $apply() 


    setPointChartMouseOver(pointLeaders) { 
    this.pointChartOptions.chart.multibar.dispatch.elementMouseover = (e) => { 
     this.selectedPointLeader = pointLeaders[e.index]; 
     this.$scope.$apply(); 
    }; 
    } 

Artikel über $ gelten() https://www.sitepoint.com/understanding-angulars-apply-digest/