$ onChangesはコンポーネントの初期化時に値を更新しません

Question

ちょっと、2つのバインディング値を持つコンポーネントがあります：load & max。 私は、値を$のOnInit方法における負荷と最大を初期化します。

負荷：0 最大：300

そして私は値を更新する必要があります$のonChangeサイクルを使用して、コンポーネントの値を変更しました

しかし、これは起こりません。私は$ onInitで設定された初期値のみを取得し、$ onChangesで設定された最後の値ではありません。 console.logを見ると、値は更新されていますが、UI（コンポーネントのテンプレート）では表示されません。

誰かが私に問題点と解決方法を説明することはできますか？

は、ここで私が話していたコードされています。すべてのバインディングが初期化された後 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()が呼び出されます。それはあなたの$onInit方法では意味、self.loadはすでに100に設定されていると、あなたは0試しで上書き：

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

もう一つ興味深い：$onChangesは$onInit前に呼び出されます。ここにディスカッションwhyがあります。