javascript - 如何通过指令在 AngularJS 中查找索引？

Question

我试过这样获取索引

这是我的html

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

这是 Controller

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

这里我可以获取索引值，但我想通过指令获取索引值

这是我的html

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

这是我的指令

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

这里我无法获取索引..那么如何在指令中获取索引值呢？

Answer 1

我有一个看起来像这样的应用程序，并且可以正常工作。无需绑定(bind)到 $parent。一切都在你的范围内，因为该指令除了默认范围外没有定义任何东西:

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);
    });
  };
});

但是，您应该重新考虑

以这种方式编写指令是不好的做法。指令的关键概念之一是它们应该封装行为。您通过让指令像那样查看 $index 来破坏封装。它要求它位于中继器内，这也会破坏封装。

相反，请考虑使用隔离作用域并通过参数传递值。

HTML 看起来像这样:

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

然后您使用隔离作用域以不同方式定义指令:

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

祝你好运!