angularjs directive data-binding not working

Question

I am trying to create a directive for a dropdown group.
However, the data-binding does not work properly.
The problem is: the default variable does not receive value from html, and the item value could not be loaded as well.

Here is the directive code:

app.directive 'addquestionbutton', ()->
    restrict: 'E'
    replace: true
    scope:
        default: '@'
        dropdown: '='
        addQuestionClick: '&'
    template: 
        '<div class="bottom-buttons-container">' + 
        '<div class="add-item">' + 
        '<div class="btn-group dropup">' + 
        '<button type="button" class="btn btn-default btn-md" id="btnSelect" ng-click="addQuestionClick(default)">Add item</button>' +
        '<button type="button" class="btn btn-info btn-md dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>' + 
        '<ul class="dropdown-menu">' + 
        '<li ng-repeat="item in dropdown">' + 
        '<a ng-click="addQuestionClick(item)">{{item}}</a></li></ul></div></div></div>'

Here is the html code:

<addquestionbutton default='Text' add-question-click="addItem(item)" dropdown="dropdownitems"></addquestionbutton>

Since this example is pretty simple, a plnkr to demonstrate would be helpful — JeremyWeir
– JeremyWeir, Commented Apr 11, 2014 at 2:32

Community · Accepted Answer · 2017-05-23 11:49:54Z

1

You just need to specify the parameter inside your function call. See this related question: calling method of parent controller from a directive in AngularJS

<button ng-click="addQuestionClick({item: default})" type="button" class="btn btn-default btn-md" id="btnSelect" >
...
<li ng-repeat="item in dropdown">
  <a ng-click="addQuestionClick({item: item})">{{item}}</a>
</li>

Here is a working demo: http://plnkr.co/edit/pqBp4C4x4riwMn5zHa7i?p=preview

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Apr 11, 2014 at 3:40

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

angularjs directive data-binding not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related