Question

我列出了国家/地区列表，这些国家/地区将填入下拉框中。我把它作为带有列表项的指令。

点击该国家/地区后，国家/地区名称应在$ scope.selected中更新，该范围在控制器中定义。

不幸的是，如果单击列表项，我无法将指令中的数据传递给控制器。我该如何映射它以便点击它时更新名称和代码。

由于

**粘贴指令代码**

myApp.directive("dropSelect",function(){

    return{
            restrict:'E',
            scope : {
                items : '=items',
                selected:'=ngModel'
            },
            template:'<input type="text" ng-model="selected.name" placeholder="country">'+'<ul><li ng-repeat="item in items" ng-click="selectedCountry(item)">{{item.name}}<li></ul>',
           link : function(){

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

            }        
    }

})

修改1：

添加@符号不会抛出错误但添加=符号会抛出错误

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

Answer 1

我认为问题在于你指令中的<http://example.com/2> a skos:Concept ; skos:broader <http://example.com/1> ; skos:prefLabel "schaapskooi"@nl . <http://example.com/1> a skos:Concept ; skos:prefLabel "restant landschapstermen"@nl ;对象。它引发的例外导致了这一点。

在你用selected绑定的html中，这意味着你的指令中的selected.name将与你控制器中selected的{{1}}属性绑定。

但是当你选择一个项目时，你试图在你的指令中设置name对象的selected属性，显然它没有它只是一个字符串。

所以解决方案：

name

只需在您的指令中将名称设置为selected。

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

编辑：

但是我会稍微重组一下。首先初始化您选择的对象，所以你的控制器中$scope.selectedCountry = function (item){ console.log(item); $scope.selected = item.name }。然后将selected更改为$scope.selected = $scope.items[0]，以便返回整个所选对象。

最后在你的指令中执行：

ng-model

现在，当您运行并选择一个项目时，代码和名称输入将正确填充。

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

希望有所帮助。

Angularjs指令和控制器之间的双向绑定

1 个答案: