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/

希望有所帮助。