AngularJS $onChanges with isFirstChange()

Skipping bindings undefined value while waiting for binding update

by AUX Coder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
  <selection-button parent-form="formObject"></selection-button>
</div>

CSS

pre{
  background-color: #fff;
}

JavaScript

angular.module('demo', ['ngAnimate'])
  .controller('demoCtrl', function($scope, $timeout) {
  	
  	$timeout(function(){
      $scope.formObject = {
      	title: 'My title',
        value: 100
      }
    }, 500);
  }).component('selectionButton', {
    bindings: {
        parentForm : '<'
    },
    templateUrl: 'selection-button-component.html',
    controller: function(){
    	var $ctrl = this;
    	$ctrl.$onChanges = function(changes){
      	console.log(changes.parentForm);
        if(angular.isDefined(changes.parentForm.currentValue) && !changes.parentForm.isFirstChange()){
            $ctrl.parentObject = changes.parentForm.currentValue;
        }
    	};
    }
	}).run(["$templateCache", function($templateCache) {
  	$templateCache.put("selection-button-component.html","<p>parentObject:</p><pre>{{$ctrl.parentObject|json}}</pre><p>parentForm:</p><pre>{{$ctrl.parentForm|json}}</pre><small>parentObject and parentForm are the same</small>");
    }]);