javascript 如何通过指令在 AngularJS 中查找索引？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20214480/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to find index in AngularJS through directive?
提问by silvesterprabu
I have tried to get index like this
我试图得到这样的索引
this is my html
这是我的 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
这是我的 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?
在这里我无法获得索引..那么如何在指令中获得索引值？
回答by AlwaysALearner
回答by Brian Genisio
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:
我有一个看起来像这样的应用程序，它可以工作。无需绑定到$parent. 一切都在您的范围内，因为该指令没有定义默认范围以外的任何内容：
http://codepen.io/BrianGenisio/pen/yFbuc
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 $indexlike that. It requires that it be inside a repeater, which also breaks encapsulation.
以这种方式编写指令是不好的做法。指令的关键概念之一是它们应该封装行为。您通过让指令查看$index类似内容来破坏封装。它要求它位于中继器内，这也会破坏封装。
Instead, consider using an isolated scope and passing the values in via parameters instead.
相反，请考虑使用隔离范围并通过参数传递值。
The HTML would look like this:
HTML 将如下所示：
<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);
});
}
};
});
Good luck!
祝你好运！
回答by David Arul
Use in the directive attribute "let ind=index"
在指令属性中使用“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>
