在 Angularjs 应用程序中的文本框和复选框模型中触发跨度单击和观看事件序列的冲突答案

【问题标题】：conflict in triggering span click and watch events sequences in text box and check box models in Angularjs application在 Angularjs 应用程序中的文本框和复选框模型中触发跨度单击和观看事件序列的冲突
【发布时间】：2024-04-16 05:35:01
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript angularjs checkbox angularjs-scope watch

【解决方案1】：

有些问题你没有涵盖，例如： - 我可以在不点击的情况下输入文本输入。（改用标签）

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：