I have tried to get index like this

this is my html

  <div ng-repeat="item in items" ng-click="findindex($index)"></div>

this is controller

 $sceop.findinedx=function(index)
{
    alert(index);
}

here i am able to get index value.but i want to get index value through directive

this is my html

 <div ng-repeat="item in items" my-directive></div> 

this is my directive

   app.directive('myDirective',function()
   {
        return function(scope, elem, attrs,$index) 
        {
              elem.bind('click', function($index)
              {
                   alert($index);
              });
        });
   };

here i am not able to get index..so how to get index value in directive?

I have tried to get index like this

this is my html

  <div ng-repeat="item in items" ng-click="findindex($index)"></div>

this is controller

 $sceop.findinedx=function(index)
{
    alert(index);
}

here i am able to get index value.but i want to get index value through directive

this is my html

 <div ng-repeat="item in items" my-directive></div> 

this is my directive

   app.directive('myDirective',function()
   {
        return function(scope, elem, attrs,$index) 
        {
              elem.bind('click', function($index)
              {
                   alert($index);
              });
        });
   };

here i am not able to get index..so how to get index value in directive?

• javascript
• angularjs

• You should really consider using an isolated scope for something like this. Having the directive rely on $index is bad practice. See my answer for elaboration. – Brian Genisio Commented Nov 26, 2013 at 11:17

3 Answers 3

I have an app that looks like this, and it works. No need to bind to $parent. Everything is in your scope because the directive hasn't defined anything other than the default scope:

http://codepen.io/BrianGenisio/pen/yFbuc

var App = angular.module('App', []);

App.controller('TestCtrl', function($scope) {
  $scope.items = ['a', 'b', 'c'];
});

App.directive('myDirective',function() {
  return function(scope, elem, attrs,$index) {
    elem.html(scope.item)

    elem.bind('click', function($index) {
      alert(scope.$index);
    });
  };
});

BUT, YOU SHOULD RECONSIDER

Writing directives this way is bad practice. One of the key concepts of directives is that they should encapsulate behavior. You are breaking encapsulation by having the directive peek into the $index like that. It requires that it be inside a repeater, which also breaks encapsulation.

Instead, consider using an isolated scope and passing the values in via parameters instead.

The HTML would look like this:

<div ng-repeat="item in items" my-directive="item" index="$index"></div>

And then you define the directive a bit differently, using an isolated scope:

App.directive('myDirective',function() {
  return {
    scope: {
     index: '=',
     item: '=myDirective'
    },
    link: function(scope, elem, attrs,$index) {
      elem.html(scope.item)

      elem.bind('click', function($index) {
        alert(scope.index);
      });
    }
  };
});

Working Codepen

Good luck!

Each of the ngRepeat iterations has a different scope. Use scope to access the respective indices:

elem.bind('click', function($index){
    alert(scope.$index);
});

Fiddle

Use in the directive attribute "let ind=index"

For example :

<ul>
    <li *ngFor="let i of items; let ind= index">
        {{i}}
        <span (click)="removeItem()" class="remove_link">X</span>
    </li>
</ul>