angular-smarty ： 一个 AngularJS 的自动完成 UI 实现
我们最近为我们的论坛增加了一个自动完成功能（称为Smarty），在要求专业人员简介的主页 上。这是一个超有用的功能，因为它有助于我们将用户导航到他们真正想去的地方。它很有意思，也是用AngularJS 构建的！
带你走近AngularJS系列 ：
我们希望Smarty能够:
以往没有AngularJS的经验，这个项目是我使用这个框架的入门项目。它真的成为了一次宝贵的学习经验，而且我发现这个框架许多方面相互借鉴地很好且能很好地符合我上面列出的要求。当然，还有一些问题尚在学习过程中！
我最喜欢Angular的一点是它是如何分解成具有明确目的的概念 的。Smarty广泛使用了其中的两个概念——Directives 和 Services。Directive和DOM绑定在了一起，用来管理和元素之间的交互；而Service通过依赖注入的方式为Controller和Directive提供了独立的可以重用的逻辑。
Angular提供了很多内建的Directive和Service，我们在这个项目中使用到了其中的多个。
我们还写了自定义的Directive和Service来满足我们的特定需求：
正如我前边所提到的，我们所面临的一个挑战是我们要确保我们没有破坏掉所有用户和下拉列表之间可能发生的交互方式。为了追踪这些用户交互，并确保我们没有在开发的过程中破坏掉它，我们使用了Jasmine 测试框架。Jasmine结合这angular-mocks一块儿使用，可以方便我们为smarty写包含描述的测试用例，像我们可以为下拉列表写“点击外部应该会消失”("should disappear on outside click")，可以为请求表单的输入写“按回车时应该填充上合适的值” (“should, on enter, fill with the appropriate value”)。
尽管简洁实用的AngularJS框架现在对我来讲，是可以轻松读懂的，但是确实要花些时间来学习。隔离作用域绑定指令符和promise是我学习过程中特别棘手的两项专题。当我研究隔离作用域时，我发现自己十分希望能看到更多的关于人们如何在他们的项目中使用不同绑定的例子，所以下面我为每种绑定类型给出一个例子。
控制器：
$scope.selected = -1;
HTML：
SmartyInput指令符：
scope: {index: "=", ...}
SmartyInput双向绑定指令符将位于控制器作用域的selected绑定到指令作用域的index索引上面，这样可以使得在index索引（建议列表中当前选定的索引）中的变化结果与指令（例如用户按向上/向下箭头）的相互作用会传播到控制器。
&: 本地与父作用域之间的单向数据绑定
控制器：
$scope.setSelected = function(newValue) {...};
HTML：
SmartyInput指令符：
scope: {select: "&", ... }...scope.select({"x": parseInt(scope.index) + 1});
SmartyInput指令符将控制器作用域中的setSelected()函数绑定到指令作用域中的select()函数上，这样可以使指令符在不改变setSelected()函数的情况下使用它。
