Angularjs 应用程序中的文本框和复选框模型在触发 span click 和 watch 事件序列时发生冲突

Question

我正在监视文本框和复选框模型以调用我的自定义函数。由于我不想在初始加载数据期间在手表内调用我的自定义函数，因此在手表内我依赖 needwatch 标志何时调用我的自定义函数。为此，我将复选框和文本框都保留在 span 元素内，当单击 span 时，我将 needWatch 标志设置为 true，以便在更改特定模型时调用自定义函数，因此在初始加载数据期间不会调用此自定义函数。此逻辑适用于文本框（即使是 select 下拉列表）但在复选框上失败。

原因是，对于文本框，它的跨度 ng-click 事件总是首先触发，然后文本框模型上的监视功能接下来被触发。至于 Check box，随机地，它的 watch 函数首先触发，然后它的 span ng-click 事件接下来触发，反之亦然。

我也想要复选框，总是首先触发它的 span ng-click 事件，而不是它的模型监视功能。可能吗？

请找到 plunker 并尝试更改文本框和复选框的值。

Answer 1

有些问题您没有涉及，例如： -我可以在不点击它的情况下输入文本输入。（改用制表符）

所以最好只使用 ng-change，你不需要废话 needWatch。或者让手表像这样工作：

 $scope.$watch('checkboxModel', function(newval, oldval) {
   if (newval != oldval) {
       console.log('watch', newval, oldval);
   }
 }, true);

Answer 2

在Angular 中，$watch 侦听器以粗体传递watch 表达式的newValue 和oldValue。

如果目标是避免运行在初始化期间使用您的自定义函数，请比较 oldValue 和 newValue 的值。如果它们相等，则在初始化期间调用了 watch，您的自定义函数不应为运行。

Angular 文档建议这是处理初始化周期的标准方法：https://docs.angularjs.org/api/ng/type/$rootScope.Scope

示例：

$scope.model = { textbox: '', checkbox: false };

$scope.$watch( 'model.textbox', function( newValue, oldValue {
    if( newValue === oldValue )
        return;

    customFunction( newValue );
});

$scope.$watch( 'model.checkbox', function( newValue, oldValue ){
    if( newValue === oldValue )
        return;

    customFunction( newValue );
});

function customFunction( value ){
    console.log( "new value: " + value );
}

Angularjs 应用程序中的文本框和复选框模型在触发 span click 和 watch 事件序列时发生冲突

conflict in triggering span click and watch events sequences in text box and check box models in Angularjs application

javascript

checkbox

watch

angularjs

angularjs-scope