Question

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

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

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

这意味着在dom中的此输入元素与Angular $ scope 中的句柄变量之间存在双向绑定，例如：

$scope.handle = '';

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

因此，在Angular applcation中，我可以明确地声明一个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应用程序（不使用Angular）中手动添加经典的vanilla JavaScript EventListener（通过addEventListener（）通过我想要观察的对象。

当输入值发生变化时，会执行与thecher相关联的功能。

好的，我很清楚。

现在我说我也可以这样做。

在HTML代码中我可以有类似的内容：

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

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

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

因此，当按钮上有click事件时， ng-Click 指令似乎会执行一个$ scope字段的函数。

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

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

Answer 1

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

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

在这里你必须使用ng-click。

使用angular一个好的做法是避免使用像addEventListener（）或Jquery等函数的函数... 因为AngularJS包含所有这些功能，并且必要时将运行摘要循环或其他巫术魔法。

Answer 2

使用点击事件。 $ scope。$ watch应该用于观察某些内容发生变化而不是更适合事件处理程序的内容。

Answer 3

两种方法＆＃34;你指出的不是一回事。完全没有。

第一个，$ watch，旨在收听$ scope更改。您可以指定要监视的范围的哪个属性，以及何时发生更改，它将调用您的回调函数。有关详细信息，请参阅Digest cycle documentation。

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

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

请参阅ngSubmit的文档。

Answer 4

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

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

4 个答案: