RaghaveShukla RaghaveShukla -4 years ago 73
AngularJS Question

undefined ng-repeat variable when passed from directive template to a controller

I have a directive with a template that uses ng-repeat on an anchor tag creating a gallery of anchors. Each anchor also has an ng-click which when clicked calls a parent controller function. To this function is passed the ng-repeat item.

Problem : This item when accessed inside the parent controller method is undefined

Here is a test scenario to simulate the similar situation

<testdirective func="show(x)" items="buttons"></testdirective>


http://plnkr.co/edit/43aNqFS71Jn9vOdh6AG2?p=preview

Answer Source

There are two changes you need to make.

in your index.html make a refrence to your function:

    <testdirective func="show" items="buttons"></testdirective>

and in your testdirective change your template like so:

  template: '<button ng-repeat="item in items" ng-click="func()(item)" id="submit" />{{item}}</button>',

Notice the change in the ng-click - first brackets is to get a refrence to the function itself and the second is to invoke the function with the paramater.

I also made a fork of your plunker: http://plnkr.co/edit/nECPbL8YoToi0jP9HJHQ?p=preview

Please tell me if that's what you wanted to achieve

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download