angularjs - 在具有隔离范围的嵌套指令中延迟双向绑定(bind)

Question

我有一个 Controller ，其中包含一个具有独立作用域的指令。每当用户更改指令下拉列表中的值时，我都需要将更改通知 Controller 。我通过为指令提供回调函数，并在指令下拉列表中的 ng-change 事件上调用此函数来做到这一点。我不能(也不想)在父 Controller 中使用 watch ，因为我只对此处用户生成的更改感兴趣。

我的问题是，在调用回调时， Controller 作用域上的值尚未通过双向绑定(bind)更新为指令中的值(我猜这是因为回调是在同一时间调用的已检测到下拉列表模型更改的摘要循环，但父 Controller 中的模型只会在后续循环中更新)。

这是一个说明问题的 plunker 示例(注意控制台输出):

http://plnkr.co/edit/igW4WiV2niFyrMX2zrjM?p=preview

plunker相关部分摘录:

Controller :

  ...
  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: '&'
    },
    ...

在父 Controller 回调中获取更新数据的最正确方法是什么？我可以看到 $timeout 有帮助，但感觉就像代码的味道，可能应该有一种方法可以强制模型在父 Controller 上更新。

Answer 1

我已经检查并修复了你的 plnkr，http://plnkr.co/edit/8XoNEq12VmXKkyBmn9Gd?p=preview

它不起作用，因为您将一个原始值传递给指令，一个字符串，双向绑定(bind)仅适用于引用。

将国家/地区值更改为对象解决了问题

vm.country = 'Belarus';

到

vm.country = {name: 'Belarus'};

然后:

template: '<select ng-model="vm.country.name" ng-change="vm.onChange()"  ' +
  ' ng-options="country for country in vm.countries">' +
'</select>'