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

Question

我绝对是 AngularJS 的新手，我对如何处理 Angular.

中的事件有以下疑问

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

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

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

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

});

所以它应该与手动添加经典香草 JavaScript EventListener 具有相同的含义（通过我想在经典旧香草 JavaScript 应用程序中观察的对象上的 addEventListener() （不使用 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 中的事件？

Answer 1

ngModel 适用于输入、select 和文本区域等特定元素。因此，您不能在按钮上使用 ngModel。这就是为什么你使用 ngClick 来获取点击事件。

Answer 2

使用点击事件。 $scope.$watch 应该用于观察什么时候发生变化，而不是那些对事件处理程序更好的东西。

Answer 3

你指出的那两个"methods"不是一回事。完全没有。

第一个 $watch 用于监听 $scope 的变化。您可以指定要监视哪个属性范围，当发生更改时它会调用回调函数。有关详细信息，请参阅 Digest cycle documentation.

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

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

请参阅 ngSubmit 的文档。

Answer 4

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

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

这里要用到ng-click

使用 angular 一个好的做法是避免使用像 addEventListener() 或 Jquery 其他函数这样的函数... 因为 AngularJS 包装了所有这些功能，并且运行会在必要时消化循环或其他巫毒魔法。

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

What is the best way to handle events in AngularJS in this case?

javascript

javascript-framework

angularjs

angularjs-directive

angularjs-scope