盡管簡潔實用的AngularJS框架現(xiàn)在對我來講，是可以輕松讀懂的，但是確實要花些時間來學(xué)習(xí)。隔離作用域綁定指令符和promise是我學(xué)習(xí)過程中特別棘手的兩項專題。當(dāng)我研究隔離作用域時，我發(fā)現(xiàn)自己十分希望能看到更多的關(guān)于人們?nèi)绾卧谒麄兊捻椖恐惺褂貌煌壎ǖ睦?，所以下面我為每種綁定類型給出一個例子。
=：本地和父作用域之間的雙向數(shù)據(jù)綁定

控制器：
 

$scope.selected = -1;

HTML：
 

<input type="text" smarty-input index="selected">

SmartyInput指令符：
 

scope: {index: "=", ...}

SmartyInput雙向綁定指令符將位于控制器作用域的selected綁定到指令作用域的index索引上面，這樣可以使得在index索引（建議列表中當(dāng)前選定的索引）中的變化結(jié)果與指令（例如用戶按向上/向下箭頭）的相互作用會傳播到控制器。

&: 本地與父作用域之間的單向數(shù)據(jù)綁定

控制器：
 

$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()函數(shù)綁定到指令作用域中的select()函數(shù)上，這樣可以使指令符在不改變setSelected()函數(shù)的情況下使用它。
@:將計算表達(dá)式綁定到本地作用域

控制器：
 

$scope.prefix = ""

HTML：
 

<div smarty-suggestions prefix="{{prefix}}">

SmartySuggestions指令符：
 

scope: {prefix: "@", ...}

通過SmartySuggestions指令符，可在建議菜單中顯示prefix的值，所以此處使用計算表達(dá)式{{prefix}}。這種綁定方式在多項復(fù)雜表達(dá)式中更常用，比如：next-index=“{{selected + 1}}”。

Promises

promise是用于執(zhí)行異步任務(wù)的技術(shù)。一個promise具有一個名為then()的方法，該方法在promise執(zhí)行時會作為被執(zhí)行的的回調(diào)函數(shù)的一個參數(shù)。當(dāng)異步任務(wù)完成，promise會將一段消息傳給那個回調(diào)函數(shù)。當(dāng)用戶輸入的prefix前綴中檢測到更改，則promise就會出現(xiàn)在Smarty的代碼中，然后我們會用$http執(zhí)行一個GET請求，用來更新顯示給用戶建議的列表。

這個過程看起來是這樣的：

當(dāng)$scope.$watch在$scope.prefix（請注意，此處綁定到用戶UI輸入界面）的值中注冊了一個更改，此時會調(diào)用getSmartySuggesction()。
 

var promise = smartySuggestor.getSmartySuggestions($scope.prefix);promise.then(function(data) {
  $scope.suggestions = data;});

在getSmartySuggesctions()中，$http.get會返回一個參與服務(wù)器響應(yīng)的promise。
 

function getSmartySuggestions(prefix) {
  requestParams["query"] = escape(prefix.toLowerCase());
  var promise = $http.get(requestUrl(),
    {
      params: requestParams,
      cache: true
    }
  ).then(function(response) {
    return response.data.slice(0, 5).map(function(item) {
      return item.Name;
    });
  });
  return promise;}

服務(wù)器響應(yīng)看起來是這樣的：

[{"ID":13,"Name":"Portrait Photography"},{"ID":24,"Name":"Commercial Photography"},{"ID":21,"Name":"Pet Photography"},{"ID":16,"Name":"Event Photography"},{"ID":26,"Name":"Headshot Photography"}]

接下來，我們會調(diào)用存在于promise中的then()方法，在解析服務(wù)器響應(yīng)回調(diào)中進(jìn)行傳遞。then()方法返回一個新的promise，它處理了解析過的響應(yīng)，并存儲到通過getSmartySuggestions()返回的promise中。

解析過的響應(yīng)看起來是這樣的：[“Portrait Photography”, “Commercial Photography”, “Pet Photography”, “Event Photography”, “Headshot Photography”]。

最終，回到$scope.$watch，我們調(diào)用promise中的then()方法，為變量suggestions分配這些解析過的響應(yīng)。
 

var promise = smartySuggestor.getSmartySuggestions($scope.prefix);
promise.then(function(data) {
  $scope.suggestions = data;
});