AngularJS - problems with $ onChanges

Question

AngularJS - problems with $ onChanges

I have an object defined in the parent component and passed in one-way binding to the components of the first and second child elements. The first child component makes changes to the object. I can’t understand why the second child component $onChangesdoes not work, even if the object changed something.

I have a project assembly, as in this snippet (a reference to JSFiddle for completeness)

angular.module('test', [])
.component('parent', {
  template: "<first-child bind='vm.obj'></first-child>\
             <second-child bind='vm.obj'></second-child>\
	    ",
  controller: function(){
    this.obj = {value: 0};
    this.$onInit = function(){}
   },
  controllerAs: 'vm',
  bindings: {}
})
.component('firstChild', {
  template: "<button ng-click='vm.plus()'>+</button>\
             <button ng-click='vm.minus()'>-</button>\
            ",
 controller: function(){
    
    this.plus = function(){
    	this.bind.value++;
    }
    
    this.minus = function(){
    	this.bind.value--;
    }
		
    this.$onInit = function(){}
		
    this.$onChanges = function(obj){
  		console.log('first-child changed one-way bindings', obj)
    }
  },
  controllerAs: 'vm',
  bindings: {
  	bind: '<'
  }
})
.component('secondChild', {
  template: "<p>{{vm.bind.value}}</p>",
  controller: function(){
		this.$onInit = function(){}
		this.$onChanges = function(obj){
			console.log('second-child changed one-way bindings', obj)
		}
  },
  controllerAs: 'vm',
  bindings: {
    bind: '<'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="test">
  <parent></parent>
</body>

Run code Hide result

So my question is: is there a way to shoot $onChangesin this situation?

EDIT

$onChanges , , - , - -. , , .

+4

javascript html angularjs

Matteo Meil 07 . '17 18:31

1

Julien TASSIN · Accepted Answer · 2017-04-07T18:48:23+0000

. $onChanges, , .

-, .

:

angular.module('test', [])
.component('parent', {
  template: "   <first-child bind='vm.obj'></first-child>\
                            <second-child value='vm.obj.value'></second-child>\
                        ",
  controller: function(){
    this.obj = {value: 0};
    this.$onInit = function(){}
    },
  controllerAs: 'vm',
  bindings: {}
})
.component('firstChild', {
    template: " <button ng-click='vm.plus()'>+</button>\
                            <button ng-click='vm.minus()'>-</button>\
                        ",
  controller: function(){

    this.plus = function(){
        this.bind.value++;
    }

    this.minus = function(){
        this.bind.value--;
    }

    this.$onInit = function(){}

    this.$onChanges = function(obj){
        console.log('first-child changed one-way bindings', obj)
        }
    },
  controllerAs: 'vm',
  bindings: {
    bind: '<'
  }
})
.component('secondChild', {
  template: "<p>{{vm.value}}</p>",
  controller: function(){
        this.$onInit = function(){}
        this.$onChanges = function(obj){
            console.log('second-child changed one-way bindings', obj)
        }
  },
  controllerAs: 'vm',
  bindings: {
    value: '<'
  }
})

, , - .

AngularJS - problems with $ onChanges

More articles: