2

I am trying to pass the function(removeItem) to the the isolate scope of the directive, and then call this function inside the directive's template, however that function gets called but without the arguments. I tried like this:

<my-directive remove="removeItem(item)"></my-directive>

place where removeItem is defined:

scope.removeItem = function(item) {
  console.log('item removed');
}

isolate scope:

scope: {
    remove: "&"
}

and directive template:

<div  ng-repeat="item in allItems | selectedItemFilter" >
   <label>{{ item.description }}</label>
   <div>
     <button ng-click="remove(item)"> Remove</button>
   </div>
</div>

So when the remove button is clicked, the actual removeItem is called, but without the item argument, which is undefined. I tried also with passing the simple string argument but removeItem never gets it, it is also undefined. What could cause this behaviour ?

Ralf Bönning
  • 14,515
  • 5
  • 49
  • 67
Zed
  • 5,683
  • 11
  • 49
  • 81
  • possible duplicate of [Angularjs pass function from Controller to Directive (or call controller function from directive) - with parameters](http://stackoverflow.com/questions/28666374/angularjs-pass-function-from-controller-to-directive-or-call-controller-functio) – Phil Mar 26 '15 at 22:05
  • TL;DR ~ you should have `ng-click="remove({item: item})"` in your directive – Phil Mar 26 '15 at 22:06

1 Answers1

1

Angular's a little un-intuitive in this regard. You actually need to specify your argument name (in the view) like so:

<button ng-click="remove({item: item})">
bvaughn
  • 13,300
  • 45
  • 46