在具有隔离范围的嵌套指令中延迟双向绑定

时间:2017-04-10 13:46:12

标签: angularjs angular angular-directive angular-components

我有一个包含带隔离范围的指令的控制器。每当用户更改指令下拉列表中的值时,我都需要通知控制器有关更改的信息。我这样做是通过为指令提供一个回调函数,并在指令的下拉列表中的ng-change事件上调用此函数。我无法(并且不想)在父控制器中使用手表,因为我只对这里的用户生成的更改感兴趣。

我的问题是,在调用回调时,控制器范围内的值尚未通过双向绑定更新为指令中的值(我猜这是因为回调是在相同的摘要周期中调用,其中已检测到下拉模型的更改,但来自父控制器的模型将仅在后续周期中更新。

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

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有帮助,但感觉就像代码味道,并且可能应该有一种方法来强制模型在父控制器上更新。

2 个答案:

答案 0 :(得分:3)

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

它无法正常工作,因为您将原始值传递给指令,字符串,双向绑定仅适用于引用。

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

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>'

答案 1 :(得分:3)

  

我想这是因为回调是在同一个摘要周期中调用的,其中检测到下拉列表模型的更改,但父控制器中的模型只会在后续周期中更新。

你是对的。在 ng-change指令评估其Angular表达式之后,将指令范围的值更新为父控制器的观察程序在摘要周期上触发。

在指令和父控制器之间共享公共对象引用是使其工作的一种方法。由于控制器和指令共享相同的引用,因此指令和父控制器都会立即看到任何更改。

另一种方法是将新值公开为on-change函数的本地参数:

<country-chooser 
    country="vm.country" 
    country-change="vm.countryChange($event)">
</country-chooser>

OR

<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);
  };

这样,父控制器内的函数需要在双向绑定上等待观察者的摘要周期,以将值从指令范围更新到父控制器范围。 / p>

DEMO on PLNKR

AngularJS v1.5组件并使其成为Angular2 + Ready

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)