在这种情况下，在 AngularJS 中处理事件的最佳方法是啥？

Posted 2023-02-22

【中文标题】在这种情况下，在 AngularJS 中处理事件的最佳方法是啥？

【英文标题】：What is the best way to handle events in AngularJS in this case?在这种情况下，在 AngularJS 中处理事件的最佳方法是什么？

【发布时间】：2016-02-15 07:03:27

【问题描述】：

我是 AngularJS 的新手，我对如何在 Angular 中处理事件有以下疑问。

所以我知道在视图中我是否有这样的东西：

<input type="text" ng-model="handle" />

这意味着在 dom 中的这个输入元素和 Angular $scope 中的 handle 变量之间存在 2 路绑定，例如：

$scope.handle = '';

因此，此输入对象发生的任何更改都意味着 $scope 中的句柄属性的更改，反之亦然。

所以，在 Angular 应用程序中，我可以显式声明一个 whatcher

// I explicitly declare a whatcher on the handle property: when the value of this propertu change the function() is performed:
$scope.$watch('handle', function(newValue, oldValue) 

    console.info('Changed!');
    console.log('Old:' + oldValue);
    console.log('New:' + newValue);

);

所以它应该与手动添加经典的 vanilla javascript EventListener 的含义相同（通过 addEventListener() 在我想在经典的旧 vanilla JavaScript 应用程序（不使用 Angular）中观察的对象上。

当输入值发生变化时，将执行与 whatcher 关联的函数。

好的，这对我来说很清楚。

现在我说我也可以做这样的事情。

在 html 代码中我可以有类似的东西：

<input type="button" value="Click Me" ng-click="alertClick()" />

在 Angular 控制器中，我会有类似的东西：

$scope.alertClick = function() 
    alert("Clicked !!!");

因此，当按钮上有点击事件时，ng-Click 指令似乎执行了一个 $scope 字段的功能。

但是我可以执行与第一个示例中相同的操作吗？如果按钮通过 ng-model="handle" 指令关联到模型对象，我可以在按钮上声明一个 whatcher 吗？

什么时候使用第一种方法更好，什么时候使用第二种方法更好地处理AngularJS中的事件？

【参考方案1】：

ngModel 用于将输入表单从 UI 绑定到您的控制器

ngClick 只是一个常规的 javascript 表达式，它可以访问将在 click 事件中执行的控制器范围。

这里你必须使用 ng-click。

使用 Angular 的一个好习惯是避免使用 addEventListener() 或 Jquery 等其他函数... 因为 AngularJS 封装了所有这些功能，并且在必要时会运行摘要循环或其他巫术魔法。

【参考方案2】：

使用点击事件。应该使用 $scope.$watch 来监视某些事情何时发生变化，而不是对事件处理程序更好的事情。

【参考方案3】：

您指出的两个“方法”不是一回事。完全没有。

第一个，$watch，用于监听 $scope 的变化。您可以指定要监视的范围的哪个属性，并且当发生更改时，它将调用您的回调函数。详情请见Digest cycle documentation。

第二个，ng-click 属性指令，监听 DOM 事件并在事件发生时评估您传入的表达式。

在您的情况下，对于按钮，您有两个选择。您可以使用ng-click 属性指令在您的范围内触发一个函数或在您输入的表单html 标记中使用ng-submit 属性指令。这样您就可以使用按钮或按下 Enter 来触发表单验证。

请参阅ngSubmit 的文档。

【参考方案4】：

ngModel 适用于特定元素，例如 input、select 和 textarea。因此，您不能在按钮上使用 ngModel。这就是你使用 ngClick 来获取点击事件的原因。