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

Posted 2023-02-22

【中文标题】AngularJS：ng-click 是“一个好习惯”吗？为啥AngularJS中没有ng-event？

【英文标题】：AngularJS: Is ng-click "a good practice"? Why is there no ng-event in AngularJS?AngularJS：ng-click 是“一个好习惯”吗？为什么AngularJS中没有ng-event？

【发布时间】：2012-12-30 01:03:00

【问题描述】：

我刚开始学习 AngularJS，并与 AngularJS 的一些概念作斗争。如果有人能解释我一些观点，那就太好了......

我知道ng-click 在技术上与onclick 不同（请参阅here），但两者都放置在标记中。我认为这将是一个“不好的做法”？如果大多数人说这是“坏”，为什么这是 AngularJS 的核心概念之一？我认为从 javascript 中选择 DOM 元素而不是在标记中放置逻辑会更好。

如果 ng-click 是对 AngularJS 中的点击事件做出反应的正确方法，我应该如何处理其他 DOM 事件？我看到还有其他几个指令，例如 ng-mouseover，但并非所有 DOM 事件都具有 AngularJS 等效项。我将如何处理 AngularJS 中的“drop”事件（因此以 AngularJS 方式 - 不是正常方式）？明确一点：我想drag a file into my webapp。

非常感谢， 琵琶

【参考方案1】：

如果大多数人说这是“坏”，为什么这是 AngularJS 的核心概念之一？

好吧，真正喜欢Unobtrusive JavaScript 的人可能会说这很糟糕。 Angularians（以及那些有 flex 背景的人）看到了更具声明性的方法的价值。

“Angular 建立在这样一种信念之上：在构建 UI 和将软件组件连接在一起时，声明式代码比命令式代码更好......级别 DOM 操作任务。--Overview doc

另见Don't the data attribute options used in Bootstrap, Angular.js, and Ember.js conflict with Unobtrusive Javascript principles?

我应该如何处理其他 DOM 事件？

编写您自己的指令来倾听它们（或找到其他人已经编写的指令）。 Angular 让你能够扩展浏览器的功能——通过编写你自己的指令。

更新：在下面的 cmets 中，Tim Stewart 提到了 AngularUI 的 ui-event，它允许您将回调绑定到 Angular 本身不支持的任何事件。

【讨论】：

+1;这一切都与上下文有关。在 Angular 应用程序中，视图声明了用户如何与应用程序交互，并且由于视图是 html，这就是 ng-click 等人的地方。走。在其他应用程序和框架中，情况并非如此。

@Pipo，我认为这与编写自己的 jQuery 插件来完成你在 jQuery 领域中想要的东西没有什么不同。我不太了解缩放部分......我们编写的指令与 Angular 人员编写的内置指令没有什么不同。在this 10-min video 中，Igor 甚至说如果你愿意，你可以重写所有的内置指令。内置指令与我们可以编写的指令相比，没有固有的速度或扩展优势。例如，同一个 Angular 编译器解析两者。

@MarkRajcok：我认为这有点不同。当我使用 jQuery 时，我可以获得我所有的“jQuery 力量”并且可以使用所有“DOM 事件”和“.on(eventName, callback”。我不必开发一个 jQuery 插件来使用所有 DOM 事件并获得jQuery 的优点。另一方面，AngularJS 中没有“ng-eventName='callback'”（至少不是所有事件）。因此，如果我不写，我不会从 AngularJS 中受益自定义指令。

@Pipo，没错，Angular 并没有开箱即用地打包相同的“事件能力”。但是，在 Angular 应用程序中，我们通常 $watch $scopes/models/data 以查看触发回调函数的更改，而不是监视触发回调函数的事件。所以我想人们可以说 Angular 具有“模型能力”，因此 对“事件能力”的需求较少。 Angular：更改数据模型并让视图（包含指令的声明性 HTML）“自动”更新/更改（DOM）。 jQuery：注册事件，触发（命令式）您为更新/更改 DOM 而编写的代码。

@Pipo - 有人已经为你做了 - 检查 AngularUI 中的 ui-event，让你绑定到任何 DOM 事件：angular-ui.github.com/#directives-event

【参考方案2】：

本质上，Angular 需要标记中的元素才能正常运行。此外，在大多数情况下，这些元素每次更改时都必须“编译”。所以，不管 JavaScript 是什么，它已经有点“突兀”了。您不能简单地替换标记，并像使用 jQuery 之类的东西一样为您自动绑定所有内容。

严格来说，不显眼的 JavaScript： 1. 分离结构和行为，让你的代码更干净，脚本维护更容易 2.抢占浏览器不兼容 3. 使用干净、语义化的 HTML 层 (Wikipedia)

那肯定不是 Angular。为了实现对所有事物的双向绑定，他们选择在 DOM 中创建自定义绑定点，而不是像 jQuery 那样使用类名或 ID。 （一种有点不标准的方法，但它显然有效。）

但真正的思考方式是：基本上，标记的每个受控部分都不再是真正的 HTML。它现在更像是一个模板，因此需要与准备渲染的引擎进行交互。因此，不显眼的传统规则并不真正适用......（FWIW，我是 jQuery.on() 函数的忠实粉丝/用户，当元素添加到页面时，它会自动将元素绑定到事件。非常干净和灵活，恕我直言，我希望在 Angular 中有类似的机制。我喜欢在页面上的多个位置向项目添加一个类，自动调用相同的事件处理程序。有一个地方可以更改代码是好东西。但我离题了...）

对我来说，更大的问题是渐进式设计。网页是否在没有启用 JavaScript 的情况下工作？真的有人在乎吗？嗯……

【讨论】：

来自 Microsoft-MVC-UnobtrusiveJS 背景，这个答案帮助我更好地理解了 Angular。

AngularJS（和 ReactJS）是突兀的 javascript 框架，它将静态数据层 (HTML) 与处理该数据所需的逻辑 (Javascript) 耦合在一起。这是不好的做法。您实际上是在将您的开发人员锁定在 Google（或 Facebook）产品中。示例：您花了 2 年时间编写一个 AngularJS 应用程序，现在您想迁移到 ReactJS，因为它具有更快的性能。如果您已将逻辑与数据分离，则可以重用您的 HTML 模板。但是，现在你被困在继续使用 AngularJS 或用 ReactJS 重写你的整个代码库。

有了良好的 DDD，与 Angular 之间的转换很容易。对于游戏级别的性能，Angular 和 React 都不是正确的选择；我会自己动手。但是 Angular 是为双向数据绑定而构建的。由于上市时间与应用程序的运行速度一样重要，因此 Angular 在这方面具有一些重要优势。 Angular 2.0 也承诺了巨大的性能改进。加上 TypeScript 兼容性。

@tfmontague React 不耦合 HTML 和 JS。 React 组件中的 JSX 看起来像 HTML，但变成了构建 DOM 的指令。 React 可以用于通过 renderToString() 或 renderToStaticMarkup() 生成 HTML，这可以用来制作“不引人注目的 JS”网站，尽管这确实很棘手。