events - 优化在焦点上更新 ng-model 和 ng-style 的 AngularJS 指令

Question

我是 AngularJS 的新手，我正在制作一些自定义的 Angular 指令来完成我以前使用 Jquery 所做的事情，但是有一种情况我不确定我是否正在这样做“Angular 的方式”。它有效，但我认为可能有更好的方法。

我想做的是这个搜索框:

当焦点位于搜索框上时，应用必须将框中文本的颜色从灰色更改为黑色。然后，应用还必须检查框中的当前文本，如果它是默认文本，则应用必须清除该文本。

当框失去焦点(模糊)时，应用程序必须将框的文本更改回灰色。只有当文本框在失去焦点时为空时，它才必须放回默认文本。

这是一个 jsfiddle，它设置了一个指令来完美地完成所有这些工作。 http://jsfiddle.net/Rick_KLN/5N73M/2/

但是我怀疑还有更好的方法。

Controller 中的所有这三个变量似乎都是不必要的。 我也似乎有 4 个 if，else 语句太多了，而且绑定(bind)到所有事件是过度的，因为只使用了焦点和模糊，并且它们在 if 语句中指定。

关于优化这个指令有什么想法吗？

Answer 1

您正在寻找的“默认文本”行为由 HTML5 placeholder 属性自动处理。 just about any modern browser 支持它, 并且可以使用 CSS 设置样式，如下所示:

标记:

<input id="searchBar" type="text" placeholder="Search" />

CSS:

#searchBar                                  { color: #858585; }    
#searchBar:focus                            { color: #2c2c2c; }    
#searchBar:focus::-webkit-input-placeholder { color: transparent; }
#searchBar:focus::-moz-placeholder          { color: transparent; }
#searchBar:focus:-moz-placeholder           { color: transparent; }
#searchBar:focus:-ms-input-placeholder      { color: transparent; }

就这么简单。

---

注意事项:

• 伪元素和伪类(-webkit-input-placeholder 等)是隐藏占位符文本的焦点。通常它会一直保留到您开始输入为止。
• 我 fork 了你原来的 jsFiddle。它不再是真正的 AngularJS 应用程序: http://jsfiddle.net/Smudge/RR9me/
• 对于旧版浏览器:您仍然可以使用与上面相同的代码，但您可以使用 Modernizr(或类似的东西)来 fall-back to a javascript-only approach如果不支持该属性。