Hi there, I've encountered a problem in my code that I'd like some help with. In my example, I have two components: Parent Component and Child Component. Both components share a field called rules.
The Parent Component passes the rules field to the Child Component using bindings ('<' one-way binding).
The issue arises when I try to update the rules field within the Child Component using $timeout. The onChange event does not trigger as expected when the data is updated.
Everything else works fine except for this specific behavior when passing an object by reference during a timeout process, which simulates an ajax call. I'm wondering why this happens and how I can force the onChange event to fire whenever the object is changed.
Below is the example illustrating my use case:
var app = angular.module("app",[]);
app.component("parent",{
template:`ParentCmp-{{$ctrl.rules}}
child- <child rules="$ctrl.rules"></child>`,
controller:['$timeout',function($timeout){
this.$onInit= function(){
this.rules = { name: "Rule1" , Description: "Description" } ;
this.updatedRules = { name: "UpdateRule1" , Description: "Update Description" }
var self = this;
$timeout(function(){
self.rules = self.updatedRules;
console.log("update rules",self.rules);
},3000);
}
}]
});
app.component("child",{
template:"childCmp-{{$ctrl.rules}}",
bindings:{
rules: '<'
},
controller:['$timeout',function($timeout){
this.$onInit= function(){
//this.rules = {};
}
this.$onChange = function(changes){
console.log("onchange event",changes);
}
}]
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="app">
<parent></parent>
</div>