Question

我有一个组件，比方说comx，

angular.component('comx', {
    templateUrl: 'someUrl',
    bindings: {
       model: '=',
       onChng: '='
    } 
}

，其html是

<input ng-model="vm.model" ng-change="vm.onChng">

我将此组件添加到其他模板中，例如

<comx model="vm.data" on-chng="vm.test(vm.data)">

vm.test = function (val) {
   console.log(val);  // val is printing infinitly
}

上述功能的控制台继续打印

Answer 1

@pankj：为什么不使用&表达式？

@amir：已经尝试过，但奇怪的是它提供的vm.data以前的数据不是新数据。

这是因为双向=绑定使用观察程序将数据从隔离范围传输到父范围。这发生在ng-change操作之后的脏检查周期中。

要立即提供隔离范围值，请将其作为局部变量公开：

angular.component('comx', {
    template: '<input ng-model="$ctrl.model" '+
              '       ng-change="$ctrl.onChng({$model: $ctrl.model})">',
    bindings: {
       model: '=',
       onChng: '&'
    } 
});

用法：

<comx model="vm.data" on-chng="vm.test($model)">
</comx>

vm.test = function (val) {
   console.log(val);
};

通过将模型公开为局部变量，它可以立即用于父范围中的函数。

DEMO on JSFiddle。

Angular 1.5组件无限地调用ng-change

1 个答案: