Angularjs two way binding between directive and controller

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

ste2425 · Accepted Answer · 2015-10-12 15:16:35Z

2

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.

answered Oct 12, 2015 at 15:16

ste2425

4,8473 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alaksandar Jesus Gene Over a year ago

Thanks for the effort.You saved my day.

Alaksandar Jesus Gene Over a year ago

What is the use of = and & and @ here

ste2425 Over a year ago

No problem, the @, =, =?, & tells angular how to bind between the directive and outside world. You can either have two way binding, optional two way binding, one way where the property is an accessor method to get the value and more. This should hopefully explain it. docs.angularjs.org/api/ng/service/$compile#-scope- Also you can have = on its own. It will expect the html attribute to have the same name as the scope property.

Collectives™ on Stack Overflow

Angularjs two way binding between directive and controller

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related