Angularjs应用程序中文本框和复选框模型中触发跨度点击和观看事件序列时发生冲突

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

本文关键字：冲突 事件 文本 中文 应用程序 复选框 模型 Angularjs      更新时间：2023-09-26

我正在监视文本框和复选框模型，以调用我的自定义函数。由于我不想在初始加载数据时在手表内部调用我的自定义函数，所以在手表内部，我取决于needwatch标志何时调用我的定制函数。为此，我在span元素中保留了复选框和文本框，当单击span时，我会将needWatch标志设为true，这样，当特定模型发生更改时，就会调用自定义函数，这样在初始加载数据时就不会调用此自定义函数。此逻辑适用于文本框（甚至适用于选择下拉框），但在复选框中失败。

原因是，对于文本框，ALWAYS，其跨度ng-click事件首先触发，然后文本框模型上的监视功能接下来启动。其中，对于复选框，随机地，其监视功能首先触发，然后其跨度ng-click事件接下来启动，反之亦然。

我还希望复选框，ALWAYS，它的跨度ng-click事件首先被触发，而不是它的模型监视功能。有可能吗？

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

有些问题您没有涉及，例如：-我可以在不点击的情况下输入到文本输入。（使用选项卡代替）

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

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

在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 );
}
相关文章：