我的问题是,在调用回调时,控制器范围内的值尚未通过双向绑定更新为指令中的值(我猜这是因为回调是在同一个摘要周期中调用的)已检测到下拉列表模型的更改,但来自父控制器的模型将仅在后续周期中更新.
这是一个说明问题的plunker示例(注意控制台输出)：
http://plnkr.co/edit/igW4WiV2niFyrMX2zrjM?p=preview
摘要相关部件的摘录：
控制器：
...
vm.countryChanged = function() {
console.log('*** countryChanged callback ***');
console.log('country:',vm.country); // old value here
$timeout(function() {
console.log('country (inside timeout):',vm.country); // new value here
});
};
...
指示：
...
template: '<select ng-model="vm.country" ng-change="vm.onChange()" ' +
' ng-options="country for country in vm.countries">' +
'</select>',scope: {
country: '=',onChange: '&'
},...
在父控制器回调中获取更新数据的最正确方法是什么？我可以看到$timeout有帮助,但感觉就像代码味道,并且可能应该有一种方法来强制模型在父控制器上更新.
解决方法
I guess this is because the callback is called in the same digest-cycle where the changes on the dropdown’s model has been detected,but the models from the parent controller will only be updated in the subsequent cycles.
你是对的.在ng-change指令评估其Angular表达式之后,将指令范围的值更新为父控制器的观察程序在摘要周期触发.
在指令和父控制器之间共享公共对象引用是使其工作的一种方法.由于控制器和指令共享相同的引用,因此指令和父控制器都会立即看到任何更改.
<country-chooser
country="vm.country"
country-change="vm.countryChange($event)">
</country-chooser>
要么
<country-chooser
country="vm.country"
country-change="vm.country=$event">
</country-chooser>
在指令中：
app.directive('countryChooser',function() {
return {
template: `<select ng-model="$ctrl.country"
ng-change="$ctrl.countryChange({'$event': vm.country})"
ng-options="country for country in $ctrl.countries">
</select>
`,scope: {
country: '<',countryChange: '&'
},bindToController: true,controllerAs: '$ctrl',
在父控制器中：
vm.countryChange = function(country) {
console.log('*** countryChange callback ***');
console.log('country:',country);
};
这样,父控制器内的函数不需要在双向绑定上等待观察者的摘要周期,以将值从指令范围更新到父控制器范围.
AngularJS v1.5组件并使它们成为Angular2准备好的
app.component('countryChooser',{
template: `<select ng-model="$ctrl.country"
ng-change="$ctrl.countryChange({'$event': vm.country})"
ng-options="country for country in $ctrl.countries">
</select>
`,bindings: {
countries: '<'
country: '<',countryChange: '&'
}
});
AngularJS v1.5引入了components,以便更容易地过渡到Angular2.
为了更容易过渡到Angular2,请避免双向(=)绑定.而是使用单向<约束和表达&捆绑. 在Angular2中,双向绑定语法实际上只是属性绑定和事件绑定的语法糖.
<country-chooser [(country)]="vm.country"> </country-chooser>
Angular2去糖双向绑定到此：
<country-chooser [country]="vm.country" (countryChange)="vm.country=$event"> </country-chooser>
有关更多信息,请参阅@Angular Developer Guide – Template Syntax (two-way)
