angular-smarty ： 一個 AngularJS 的自動完成 UI 實現
我們最近為我們的論壇增加了一個自動完成功能（稱為Smarty），在要求專業人員簡介的主頁上。這是一個超有用的功能，因為它有助於我們將用戶導航到他們真正想去的地方。它很有意思，也是用AngularJS構建的！
帶你走近AngularJS系列：
如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm
AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm
我們希望Smarty能夠:
通過用戶的給定輸入 (一個前綴)，通過一個HTTP請求後自動提供建議
顯示一個建議的下拉列表
當用戶輸入時更新
足夠快，能夠跟得上用戶的輸入
導航直觀且能夠關閉
可重用
以往沒有AngularJS的經驗，這個項目是我使用這個框架的入門項目。它真的成為了一次寶貴的學習經驗，而且我發現這個框架許多方面相互借鑒地很好且能很好地符合我上面列出的要求。當然，還有一些問題尚在學習過程中！
我最喜歡Angular的一點是它是如何分解成具有明確目的的概念的。Smarty廣泛使用了其中的兩個概念——Directives 和 Services。Directive和DOM綁定在了一起，用來管理和元素之間的交互；而Service通過依賴注入的方式為Controller和Directive提供了獨立的可以重用的邏輯。
Angular提供了很多內建的Directive和Service，我們在這個項目中使用到了其中的多個。
為了顯示建議(見要求2)，我們使用了ngIf 和 ngRepeat 指令來有條件的顯示和填充建議下來列表。
為了實現當用戶輸入的時候更新建議內容（見要求3），我們使用了ngModel 指令將$scope上前綴變量上輸入元素的請求和Scope上的$watch方法雙向綁定起來，用來監聽前綴的變化。
我們需要考慮的一件事是這個自動完成功能的更新速度可能跟不上用戶的輸入速度（見要求4）。因為每當前綴的值發生變化時，Smarty都要發送一個HTTP請求（通過內建的$http Service）。我們決定用 $http 的可選配置參數($http.get(requestUrl, {cache: true}))來緩存結果。這是提升性能的一個很簡單的方法。
我們還寫了自定義的Directive和Service來滿足我們的特定需求：
smartySuggestor Service:smartySuggestor 提供了一個getSmartySuggestions()函數，用來接受用戶生成的前綴作為它的參數，並通過http請求訪問我們後端的suggestor服務來得到自動完成的建議。（見要求1）。
smartyInput Directive: 我們所面臨的一個挑戰是，定義出一個用戶和下拉列表之間的所有可能的交互，並且寫測試用例，以確保在開發期間和開發之後，這些功能都是完好的。我們使用一個Directive(smartyInput)來包含用戶和下拉列表之間所有可能發生的交互（見要求6），同時，我們使用內建的ng-mouseover 和 ng-click 指令(Directive)來定義下拉列表和鼠標事件之間的交互。
正如我前邊所提到的，我們所面臨的一個挑戰是我們要確保我們沒有破壞掉所有用戶和下拉列表之間可能發生的交互方式。為了追蹤這些用戶交互，並確保我們沒有在開發的過程中破壞掉它，我們使用了Jasmine測試框架。Jasmine結合這angular-mocks一塊兒使用，可以方便我們為smarty寫包含描述的測試用例，像我們可以為下拉列表寫“點擊外部應該會消失”("should disappear on outside click")，可以為請求表單的輸入寫“按回車時應該填充上合適的值” (“should, on enter, fill with the appropriate value”)。
盡管簡潔實用的AngularJS框架現在對我來講，是可以輕松讀懂的，但是確實要花些時間來學習。隔離作用域綁定指令符和promise是我學習過程中特別棘手的兩項專題。當我研究隔離作用域時，我發現自己十分希望能看到更多的關於人們如何在他們的項目中使用不同綁定的例子，所以下面我為每種綁定類型給出一個例子。
控制器：
$scope.selected = -1;
HTML：
<input type="text" smarty-input index="selected">
SmartyInput指令符：
scope: {index: "=", ...}
SmartyInput雙向綁定指令符將位於控制器作用域的selected綁定到指令作用域的index索引上面，這樣可以使得在index索引（建議列表中當前選定的索引）中的變化結果與指令（例如用戶按向上/向下箭頭）的相互作用會傳播到控制器。
&: 本地與父作用域之間的單向數據綁定
控制器：
$scope.setSelected = function(newValue) {...};
HTML：
<input type="text" smarty-input select="setSelected(x)">
SmartyInput指令符：
scope: {select: "&", ... }...scope.select({"x": parseInt(scope.index) + 1});
SmartyInput指令符將控制器作用域中的setSelected()函數綁定到指令作用域中的select()函數上，這樣可以使指令符在不改變setSelected()函數的情況下使用它。
更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2014-06/103425p2.htm