AngularJS，如何使 UI 依赖于哪个字段具有焦点？答案

【问题标题】：AngularJS, how do I make the UI dependent on which field has focus?AngularJS，如何使 UI 依赖于哪个字段具有焦点？
【发布时间】：2012-06-24 04:44:07
【问题描述】：

我有一个带有多个表单输入的 AngularJS 页面。

当某些输入具有焦点时，我想更改页面的其他任意方面。

例如，当用户在“股票代码”输入时，我想显示热门股票代码列表。当他们在“数量”字段中时，我想显示库存数量和交货时间。

是否有一个包含“当前”输入的变量（具有焦点的那个），或者我需要恢复到 jQuery 的 onFocus。（现在看起来有点原始。）

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

做一个指令怎么样？您可以在用户离开/进入输入时设置一个变量，并检测到：http://jsfiddle.net/TZnj2/

如果您对正在发生的事情感到困惑，请务必阅读指令指南：http://docs.angularjs.org/guide/directive

我还在该指令中使用了 scope.$apply，下面是对其作用的解释：http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply

【讨论】：

很多 Angular JS 看起来很优雅，但这似乎需要很多代码来实现这一点——他们是否忘记了 ngFocus 和 ngBlur 指令？
所以你想要优雅试试这个，然后:-D:jsfiddle.net/andytjoslin/3Aevb/1。我猜，Angular 只是不想为everything 编写指令。 ng-click 和 ng-dblclick 等只是指令，yunno。没什么特别的。
只是我的看法，但我仍然认为 jQuery 在这种特殊的模糊/焦点情况下读起来更好（我使用对象对其进行了过度设计，如果它被内联，则可以使用更少的代码）jsfiddle.net/gregk/r2336跨度>
但是你的所有逻辑都与你的 DOM 耦合。这是角度的真棒的一部分。视图关心 DOM，控制器关心逻辑。
对于更大的 Web 应用程序，我承认这会成为一个问题。

【解决方案2】：

ngFocus 和 ngBlur 是内置指令：

<input ng-focus="hasFocus = true" ng-blur="hasFocus = false" type="text">
<p ng-show="hasFocus">The field has focus!!</p>

Try demo on jsfiddle

【讨论】：