AngularJS指令和控制器之间的两种方式绑定

Question

I got list of countries, which will be populated in a dropdown box. I made it as a directive with list items.

And it on click of the country, the country name should be updated in $scope.selected which is defined in the controller.

Unfortunately i couldnt pass the data from the directive to the controller if the list item is clicked. How should i map it so that on click it updates the name and code.

Here is the JSFIDDLE

Thanks

** Pasting the directive code **

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
            }

            }        
    }

})

Edit 1:

adding @ symbol doesnt throw error but adding = symbol throws error

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

Answer 1

I believe the issue is your selected object in your directive. The exception it throws leads towards that away.

In the html you bind with selected.name which means selected in your directive will be bound with the name property of selected in your controller.

However when you select an item your trying to set a name property of the selected object in your directive which obviously it doesn't have as its just a string.

So the solution:

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

Just set the name to selected in your directive.

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

---

EDIT:

However i would restructure it slightly. First initialize your selected object, so $scope.selected = $scope.items[0] in your controller. Then change the ng-model to ng-model="selected" so that your returning the whole selected object.

finally in your directive do:

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

Now when you run and select an item the code and name inputs populate correctly.

See second fiddle: http://jsfiddle.net/abarfhr8/2/

Hope that helps.