为啥我们需要 ng-click?

Posted

技术标签:

【中文标题】为啥我们需要 ng-click?【英文标题】:Why do we need ng-click?为什么我们需要 ng-click? 【发布时间】:2012-08-07 19:09:01 【问题描述】:

Angular 应用使用ng-click() 属性而不是onclick 事件。

这是为什么?

【问题讨论】:

显然,您可以允许用户单击禁用的元素。 (这是ng-click 允许的。为什么会这样,我不知道。) 【参考方案1】:

Angular 不会改变onclick 属性的含义;它添加了并行ng-click 属性以获取Angular expression。 onclick 即使在使用 Angular 时也采用普通的旧 javascript 代码。

实际上,假设您在点击处理程序中所做的是更改 Angular 范围内的某些变量,或者调用 Angular 范围内的函数来更改某些变量。 要从 JavaScript 代码中做到这一点(就像你在 onclick 中输入的一样)需要一堆步骤

获取对范围的引用 分配变量或调用函数 致电scope.$apply,以便任何关注您更改的变量更新的人都会收到通知

这看起来像:

<a onclick="var $scope = angular.element(event.target).scope(); $scope.yourVar = 42; $scope.$apply()">Go</a>

加上ng-click 和一个用于赋值的Angular 表达式,几乎所有这些都是隐含的:

<a ng-click="yourVar = 42">Go</a>

【讨论】:

【参考方案2】:

ng-click 包含一个角度表达式。 Angular 表达式在 Angular scope 的上下文中进行评估,该上下文绑定到具有 ng-click 属性的元素或该元素的祖先。

Angular 表达式语言不包含流控制语句,也不能声明变量或定义函数。这些限制意味着模板只能访问变量并运行由控制器或指令提供的函数。

【讨论】:

以上是关于为啥我们需要 ng-click?的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS:ng-click 是“一个好习惯”吗?为啥AngularJS中没有ng-event?

AngularJS - 在使用 ng-click 运行函数之前需要输入字段

Angular `ng-click` 在 DataTables 表行中不起作用

离子在右键单击和中键单击时触发不需要的 ng-click

将 onclick/ng-click 事件附加到网格数据绑定事件中的元素

AngularJS ng-click事件点击无效