我有一个模型：
class Model {
constructor(data) {
this.data = data;
}
getData() {
return this;
}
}
2个嵌套组件：
var parentComponent = {
bindings: {
vm: '<'
},
controller: function() {
var ctrl = this;
},
template: `
<div>
<a ui-sref="hello.about" ui-sref-active="active">sub-view</a>
Parent component<input ng-model="$ctrl.vm.data">
<ui-view></ui-view>
</div>
`
};
var childComponent = {
bindings: {
vm: '<'
},
template: `
<div>
Child component <input ng-model="$ctrl.vm.data">
<br/>
Child component copy<input ng-model="$ctrl.vmCopy.data">
<br/>
Child component doCheck<input ng-model="$ctrl.vmCheck.data">
</div>
`,
controller: function() {
var ctrl = this;
ctrl.$onChanges = function(changes) {
ctrl.vmCopy = angular.copy(ctrl.vm);
ctrl.vm = ctrl.vm;
};
ctrl.$doCheck = function () {
var oldVm;
if (!angular.equals(oldVm, ctrl.vm)) {
oldVm = angular.copy(ctrl.vm);
ctrl.vmCheck = oldVm;
console.log(ctrl)
}
}
}
}
双方都从解决方案中获取数据：
.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
resolve: {
vm: [function() {
return myModel.getData();
}]
},
component: 'parent'
}
var aboutState = {
name: 'hello.about',
url: '/about',
resolve: {
vm: [function() {
return myModel.getData();
}]
},
component: 'child'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
})
我希望在模型更改或父项更改时更新组件，但是我不希望它们更新模型。
我认为这就是为什么绑定“ <”代表一种方式的原因。
这里有一个fiddle来说明我想做什么。
换句话说： 我希望子组件在父项更改时进行更新，但不希望子项更新父项。
您可以在小提琴中看到，如果我直接绑定到本地范围，则子级会从父级获取更新，而且还会更新父级
如果我将绑定复制到本地范围，则子级不会更新父级，也不会被父级更新。 如果
答案 0 :(得分：2)
$doCheck生命周期挂钩 1 绑定对象或数组引用时，$onChanges挂钩仅在引用的值更改时执行。要检查对象或数组的内容的更改，请使用$doCheck生命周期挂钩：
app.component('nvPersonalTodo', {
bindings: {
todos: "<"
},
controller: function(){
var vm = this;
this.$doCheck = function () {
var oldTodos;
if (!angular.equals(oldTodos, vm.todos)) {
oldTodos = angular.copy(vm.todos);
console.log("new content");
//more code here
};
}
})
从文档中：
控制器可以提供以下用作生命周期挂钩的方法：
$doCheck()-在摘要周期的每一回合调用。提供机会来检测更改并采取措施。您希望对检测到的更改做出响应的任何操作都必须从此挂钩中调用。实现此功能对调用$onChanges的时间没有影响。例如，如果您希望执行深度相等性检查或检查Date对象，而Angular的变更检测器无法检测到该更改，并且因此不会触发，则此钩子可能很有用$onChanges。该钩子不带参数调用；如果检测到更改，则必须存储以前的值以供比较与当前值。— AngularJS Comprehensive Directive API Reference -- Life-cycle hooks
有关更多信息，