Angularjs指令和控制器之間的雙向綁定

Question

我得到了國家列表，這些國家將填充在下拉框中。我將它作爲列表項的指令。

然後點擊國家，國家名稱應該更新在控制器中定義的$ scope.selected中。

不幸的是，如果列表項被點擊，我不能將指令中的數據傳遞給控制器​​。 我應該如何映射它，以便單擊它時更新名稱和代碼。

Here is the JSFIDDLE

由於

**粘貼該指令代碼**

編輯1：

添加@符號犯規擲錯誤但加入=符號拋出錯誤

selected:'=ngModel' //throws error 
selected:'@ngModel' //no error 

Answer 1

我相信問題是您的指令中的selected對象。它拋出的異常導致了這一點。

在您綁定的html中selected.name這意味着您的指令中的selected將與您的控制器中的selected的name屬性綁定。

但是，當您選擇一個項目時，試圖在您的指令中設置selected對象的name屬性，顯然它不具有它的字符串。

因此，解決辦法：

 $scope.selectedCountry = function (item){ 
      console.log(item); 
      $scope.selected = item.name 
     } 

在您的指令只需設置名稱selected。

http://jsfiddle.net/abarfhr8/1/

---

編輯：

不過，我想稍微重組它。首先在您的控制器中初始化您選擇的對象 ，然後$scope.selected = $scope.items[0]。然後將ng-model更改爲ng-model="selected"，以便返回整個選定的對象。

終於在你的指令做：

 $scope.selectedCountry = function (item){ 
      console.log(item); 
      $scope.selected = item 
     } 

現在，當你運行和選擇代碼和名稱輸入正確填寫的項目。

見第二小提琴：http://jsfiddle.net/abarfhr8/2/

希望有所幫助。