Question

In my directive I have a template with ng-repeat,

 ...return {
       template:'<div id="wrapper"><ul><li ng-repeat="item in items">{{item.name}}</li></ul></div>',
       compile:function (tElement, tAttrs) {

        return function (scope, iElement, iAttrs) {
              //bind item mouse event to a closure function
        }
    }
    }...

I would like to bind each element of the repeater with a function inside my directive, what would be the best way?

Answer 1

You need to screate isolated scope and pass items to directive by adding scope: { items: '='} to directive definition object, then add handler to each item:

<span ng-click='clicked(item)'>{{item.name}}<span>

And in link function:

scope.clicked = function(item) { .. Do thmthng with item...};

And use it as <directive items='items' ...>