admin管理员组文章数量:1322023
I have an object defined in the parent ponent and passed in one-way binding to first-child and second-child ponents. First-child ponent make changes in the object. I cannot understand why in the second-child ponent $onChanges
doesn't fire even if the object have changed something.
I have a project build as in this snippet (link to JSFiddle for pleteness)
angular.module('test', [])
ponent('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: {}
})
ponent('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: '<'
}
})
ponent('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=".js/1.6.1/angular.min.js"></script>
<script src=".1.1/jquery.min.js"></script>
<body ng-app="test">
<parent></parent>
</body>
I have an object defined in the parent ponent and passed in one-way binding to first-child and second-child ponents. First-child ponent make changes in the object. I cannot understand why in the second-child ponent $onChanges
doesn't fire even if the object have changed something.
I have a project build as in this snippet (link to JSFiddle for pleteness)
angular.module('test', [])
.ponent('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: {}
})
.ponent('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: '<'
}
})
.ponent('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./ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="test">
<parent></parent>
</body>
So my question is, is there a way to fire $onChanges
in this situation?
$onChanges
doesn't fire even if I define an array in parent, pass to first-child and second-child in one-way binding and in first-child I push something. But in that case the object has changed, so i still don't undertand why.
1 Answer
Reset to default 5You are misunderstanding the usage of one-way binding a little.
One-way binding will trigger $onChanges
if the object changes, but not if a property of the object changes.
You must bind directly to the value in secondChild
, not the full object.
Here is a solution to your problem:
angular.module('test', [])
.ponent('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: {}
})
.ponent('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: '<'
}
})
.ponent('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: '<'
}
})
Quick advice: I think you should work with two-way binding with firstChild
, directly on the value, and then one-way in secondChild
directly with value too.
Your fiddle with correction.
本文标签: javascriptAngularJSproblems with onChangesStack Overflow
版权声明:本文标题:javascript - AngularJS - problems with $onChanges - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742111376a2421271.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论