$ onChanges aktualisiert den Wert bei der Initialisierung der Komponente nicht

Question

Hey ich habe eine Komponente, die zwei Bindungswerte haben: load & max. Ich bin die Last und max in $ onInit Verfahren mit Werten initialisieren:

Last: 0 max: 300

und dann habe ich den Wert der Komponente geändert onChange Zyklus mit $, die den Wert aktualisieren von 100 zu laden.

Aber das passiert nicht, ich bekomme nur die Initialize-Werte, die in $ onInit gesetzt wurde und nicht den letzten Wert, der in $ onChanges gesetzt wurde. Ich kann mit der console.log sehen, dass der Wert aktualisiert wurde, aber ich kann es nicht auf der Benutzeroberfläche (Vorlage der Komponente) sehen.

Kann mir jemand erklären, was das Problem ist und wie man es löst? Hier

ist der Code, die ich spreche: http://codepen.io/Barak/pen/JEVWbO

<div ng-app="app" ng-controller="mainCTRL"> 
    <load load="loadData" max="maxData"></load> 
</div> 

var app = angular.module("app",[]); 

app.controller("mainCTRL",function($scope){ 
    $scope.loadData = 100; 
    $scope.maxData = 500; 
}) 
app.component("load",{ 
    template:'<div><span>{{$ctrl.load}}</span> <span>{{$ctrl.max}}</span></div>', 
    controller: loadController, 
    bindings: { 
     load: '<', 
     max: '<' 
    } 
}) 

function loadController(){ 
    var self = this; 
    self.$onInit = function(){ 
    self.load = 0; 
    self.max = 300; 
    } 

    self.$onChanges = function(changes){ 
    self.load = changes.load.currentValue; 
    console.log('onChanges self.load',self.load); 
    } 

} 

Answer 1

$onInit() aufgerufen wird, nachdem alle Bindungen initialisiert wurden. Es bedeutet in Ihrem $onInit Methode hat self.load bereits auf 100 gesetzt wurde und Sie überschreiben es mit 0 Versuchen:

self.$onInit = function(){ 
    self.load = self.load || 0; 
    self.max = self.max || 300; 
    } 

Eine weitere interessante Sache: $onChanges vor $onInit genannt wird. Hier ist eine Diskussion why.